Dynamic Next.js pages backed by APIForge

The pattern: Next.js owns routing and rendering; APIForge owns content. Editors create pages in the CMS; the site updates without deploys.

1 · Model a pages resource

path        text   (e.g. /services/ai-agents, required, searchable)
title       text
type        select (landing / service / article)
content     blocks (hero, feature-grid, faq, cta…)
meta_title  text
meta_desc   textarea

The blocks field is the page builder: editors compose ordered sections; your frontend maps each block type to a React component.

2 · One catch-all route

// app/[[...slug]]/page.tsx
const path = '/' + (params.slug?.join('/') ?? '');
const page = await fetch(
  `${API}/pages?filter[path]=${encodeURIComponent(path)}`,
  { headers: { Authorization: `Bearer ${KEY}` }, next: { revalidate: 300 } }
).then(r => r.json()).then(j => j.data?.[0]);
if (!page) notFound();
return ;

3 · Static params from the API

export async function generateStaticParams() {
  const { data } = await fetch(`${API}/pages?per_page=500`).then(r => r.json());
  return data.map(p => ({ slug: p.path.split('/').filter(Boolean) }));
}

Add a page in the CMS → it exists on the site. No code change.

4 · Draft preview

Enable Project Settings → Draft Preview and send the token from your Next.js draft-mode route as X-Preview-Token. Editors see unpublished pages live; the public site stays cached and clean.

5 · Going multilingual later?

Enable localization, and the same fetch becomes …&locale=sv, with automatic fallback for untranslated pages, and one-click AI translation in the editor.