Next.js

// delivery.js — no SDK or API key required. Node 22+ or a modern browser.
export async function getArticle({ origin, organization, site, slug }) {
  const base = new URL(origin);
  if (base.protocol !== 'https:' && !['localhost', '127.0.0.1'].includes(base.hostname)) {
    throw new Error('Use an HTTPS Content origin');
  }
  if (![organization, site].every(id => /^[a-f0-9-]{36}$/.test(id))) {
    throw new Error('Set your organization and site UUIDs');
  }
  const prefix = '/delivery/v1/' + organization + '/' + site + '/';
  async function read(path) {
    const url = new URL(path, base);
    if (url.origin !== base.origin || !url.pathname.startsWith(prefix) || url.search || url.hash) {
      throw new Error('Unexpected delivery URL');
    }
    const response = await fetch(url, {
      credentials: 'omit', cache: 'no-store', redirect: 'error',
      signal: AbortSignal.timeout(8000),
    });
    if (!response.ok) throw new Error('Content delivery returned ' + response.status);
    return response.json();
  }
  const current = await read(prefix + 'current.json');
  const manifest = await read(current.url);
  const entry = manifest.entries.find(item => item.type === 'article' && item.slug === slug);
  if (!entry) return null;
  const document = await read(entry.url);
  return { releaseId: current.releaseId, document };
}

// app/articles/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getArticle } from '../../../lib/delivery';
export const dynamic = 'force-dynamic';
export default async function Article({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const result = await getArticle({ origin: process.env.CONTENT_ORIGIN,
    organization: process.env.CONTENT_ORGANIZATION_ID, site: process.env.CONTENT_SITE_ID, slug });
  if (!result) notFound();
  return <article><h1>{result.document.title}</h1>
    <p style={{ whiteSpace: 'pre-wrap' }}>{result.document.fields.body}</p></article>;
}
// app/articles/[slug]/error.tsx
'use client';
export default function ArticleError({ reset }: { reset: () => void }) {
  return <section><h1>Content temporarily unavailable</h1><button onClick={reset}>Try again</button></section>;
}