Connect Auto SEO to Next.js Blog

1. lib/autoseo.ts

// lib/autoseo.ts — the whole client. No dependency to install.
const API = "https://autoseo.it.com/api/content-api/v1";

// Server-side only. Never prefix this with NEXT_PUBLIC_ — that would ship your
// key in the browser bundle, and anyone could read it from view-source.
const KEY = process.env.AUTOSEO_BLOG_API_KEY;

export type Article = {
  slug: string;
  title: string;
  metaTitle: string | null;
  metaDescription: string | null;
  excerpt: string;
  image: string | null;
  tags: string[];
  wordCount: number;
  readingTimeMinutes: number;
  publishedAt: string | null;
  updatedAt: string | null;
  html?: string;
};

async function get<T>(path: string, revalidate = 3600): Promise<T> {
  if (!KEY) throw new Error("AUTOSEO_BLOG_API_KEY is not set");
  const res = await fetch(`${API}${path}`, {
    headers: { Authorization: `Bearer ${KEY}` },
    // Next caches this on your server. An hour keeps your blog fast and picks
    // new articles up on its own; drop it to 0 while you're building.
    next: { revalidate },
  });
  if (res.status === 404) return null as T;
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
    throw new Error(body.error || `Auto SEO API ${res.status}`);
  }
  return res.json() as Promise<T>;
}

export const listArticles = (page = 1, tag?: string) =>
  get<{ articles: Article[]; page: number; totalPages: number; total: number }>(
    `/articles?page=${page}${tag ? `&tag=${encodeURIComponent(tag)}` : ""}`,
  );

export const getArticle = (slug: string) =>
  get<{ article: Article } | null>(`/articles/${encodeURIComponent(slug)}`);

export const listTags = () => get<{ tags: { tag: string; slug: string; count: number }[] }>("/tags");

export const listSitemap = () =>
  get<{ entries: { slug: string; updatedAt: string | null }[] }>("/sitemap");

2. Your blog routes

// app/blog/page.tsx — the index
import Link from "next/link";
import { listArticles } from "@/lib/autoseo";

export const metadata = { title: "Blog" };

export default async function BlogIndex({
  searchParams,
}: { searchParams: Promise<{ page?: string }> }) {
  const { page } = await searchParams;
  const { articles, totalPages, page: current } = await listArticles(Number(page) || 1);

  return (
    <main>
      <h1>Blog</h1>
      {articles.map((a) => (
        <article key={a.slug}>
          {a.image && <img src={a.image} alt="" />}
          <h2><Link href={`/blog/${a.slug}`}>{a.title}</Link></h2>
          <p>{a.excerpt}</p>
          <small>{a.readingTimeMinutes} min read</small>
        </article>
      ))}
      {current < totalPages && <Link href={`/blog?page=${current + 1}`}>Next page</Link>}
    </main>
  );
}

// app/blog/[slug]/page.tsx — the article
import { notFound } from "next/navigation";
import { getArticle } from "@/lib/autoseo";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const data = await getArticle(slug);
  if (!data) return {};
  const a = data.article;
  return {
    title: a.metaTitle || a.title,
    description: a.metaDescription || a.excerpt,
    alternates: { canonical: `/blog/${a.slug}` },
    openGraph: {
      title: a.metaTitle || a.title,
      description: a.metaDescription || a.excerpt,
      images: a.image ? [a.image] : [],
      type: "article",
      publishedTime: a.publishedAt || undefined,
    },
  };
}

export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const data = await getArticle(slug);
  if (!data) notFound();
  const a = data.article;

  return (
    <article>
      <h1>{a.title}</h1>
      {a.publishedAt && <time dateTime={a.publishedAt}>{new Date(a.publishedAt).toLocaleDateString()}</time>}
      {/* The body is HTML we generated and you approved. */}
      <div dangerouslySetInnerHTML={{ __html: a.html! }} />
    </article>
  );
}

3. Sitemap

// app/blog/sitemap.ts — your domain, our slugs
import type { MetadataRoute } from "next";
import { listSitemap } from "@/lib/autoseo";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const { entries } = await listSitemap();
  return entries.map((e) => ({
    url: `https://yoursite.com/blog/${e.slug}`,
    lastModified: e.updatedAt ? new Date(e.updatedAt) : undefined,
  }));
}