Headless API (Next.js & custom sites)

import "server-only";

const BASE = "https://seosorted.ai/api/v1/content";

export interface ArticleIndex {
  id: string;
  slug: string;
  title: string;
  headline: string;
  metaDescription: string;
  image: string | null;
  readingTime: number;
  category: { title: string; slug: string };
  tags: { title: string; slug: string }[];
  publishedAt: string;
  createdAt: string;
  updatedAt: string;
}

export interface Article extends ArticleIndex {
  metaTitle: string;
  metaKeywords: string;
  focusKeyword: string | null;
  imageAlt: string | null;
  author: string | null;
  wordCount: number | null;
  url: string | null;
  html: string;
  markdown: string;
  outline: string[];
  schemaJsonLd: string | null;
  relatedPosts: { id: string; headline: string; slug: string }[];
}

async function get<T>(path: string): Promise<T | null> {
  const res = await fetch(`${BASE}${path}`, {
    headers: { Authorization: `Bearer ${process.env.SEOSORTED_BLOG_KEY}` },
    next: { revalidate: 300 }, // re-check every 5 minutes
  });
  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`SeoSorted API ${res.status}`);
  return (await res.json()).data as T;
}

type Page = { articles: ArticleIndex[]; total: number; page: number; limit: number };

export const getArticles = (page = 0, limit = 10) =>
  get<Page>(`/articles?page=${page}&limit=${limit}`);
export const getCategoryArticles = (slug: string, page = 0, limit = 10) =>
  get<Page>(`/articles?category=${encodeURIComponent(slug)}&page=${page}&limit=${limit}`);
export const getTagArticles = (slug: string, page = 0, limit = 10) =>
  get<Page>(`/articles?tag=${encodeURIComponent(slug)}&page=${page}&limit=${limit}`);
export const getArticle = (slug: string) =>
  get<Article>(`/articles/${encodeURIComponent(slug)}`);
export const getSitemap = () =>
  get<{
    articles: { slug: string; lastmod: string; url: string | null }[];
    categories: { slug: string; lastmod: string }[];
    tags: { slug: string; lastmod: string }[];
  }>("/sitemap");

import Link from "next/link";
import { getArticles } from "@/lib/seosorted";

export default async function Blog({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const page = Number((await searchParams).page ?? 0);
  const data = await getArticles(page, 12);
  if (!data) return null;

  return (
    <main className="mx-auto max-w-5xl px-4 py-12">
      <h1 className="text-3xl font-bold">Blog</h1>
      <div className="mt-8 grid gap-8 md:grid-cols-3">
        {data.articles.map((a) => (
          <Link key={a.id} href={`/blog/${a.slug}`}>
            {a.image && <img src={a.image} alt="" className="aspect-video rounded-lg object-cover" />}
            <h2 className="mt-3 font-semibold">{a.headline}</h2>
            <p className="text-sm text-gray-600">{a.metaDescription}</p>
          </Link>
        ))}
      </div>
      <nav className="mt-10 flex justify-between">
        {page > 0 && <Link href={`/blog?page=${page - 1}`}>← Newer</Link>}
        {(page + 1) * 12 < data.total && <Link href={`/blog?page=${page + 1}`}>Older →</Link>}
      </nav>
    </main>
  );
}

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getArticle } from "@/lib/seosorted";

type Props = { params: Promise<{ slug: string }> };

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

export default async function Article({ params }: Props) {
  const post = await getArticle((await params).slug);
  if (!post) notFound();

  return (
    <article className="prose mx-auto max-w-2xl px-4 py-12">
      {post.schemaJsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: post.schemaJsonLd }}
        />
      )}
      <h1>{post.headline}</h1>
      <p className="text-sm text-gray-500">
        {new Date(post.publishedAt).toLocaleDateString()} · {post.readingTime} min read
      </p>
      {post.image && <img src={post.image} alt={post.imageAlt ?? ""} />}
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
      {post.relatedPosts.length > 0 && (
        <>
          <h2>Related posts</h2>
          <ul>
            {post.relatedPosts.map((r) => (
              <li key={r.id}>
                <Link href={`/blog/${r.slug}`}>{r.headline}</Link>
              </li>
            ))}
          </ul>
        </>
      )}
    </article>
  );
}

import { getSitemap } from "@/lib/seosorted";

const SITE = "https://yoursite.com";

export async function GET() {
  const data = await getSitemap();
  const urls = [
    ...(data?.articles ?? []).map((a) => [`/blog/${a.slug}`, a.lastmod]),
    ...(data?.categories ?? []).map((c) => [`/blog/category/${c.slug}`, c.lastmod]),
    ...(data?.tags ?? []).map((t) => [`/blog/tag/${t.slug}`, t.lastmod]),
  ];
  const body = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.map(([loc, mod]) => `<url><loc>${SITE}${loc}</loc><lastmod>${mod}</lastmod></url>`).join("\n")}
</urlset>`;
  return new Response(body, { headers: { "Content-Type": "application/xml" } });
}