{ "slug": "nextjs-guide", "title": "Next.js Integration Guide", "description": "Complete guide to building a Next.js App Router site with @webhouse/cms — from content reading to deployment.", "category": "guides", "order": 11, "locale": "en", "translationGroup": "31d8144c-4707-4568-b6f1-a3229720c470", "helpCardId": null, "content": "## Overview\n\nThis guide walks you through building a complete Next.js site with @webhouse/cms. The CMS handles content storage and editing. Next.js handles rendering and routing.\n\n## Step 1: Project setup\n\n{{snippet:create-project}}\n\nOr start from the Next.js boilerplate:\n\n```bash\nnpm create @webhouse/cms my-site -- --template nextjs\n```\n\n## Step 2: Content layer\n\nThe content layer reads JSON files at build/request time:\n\n{{snippet:content-loader}}\n\n## Step 3: Root layout\n\n```typescript\n// app/layout.tsx\nexport default function RootLayout({ children }) {\n const global = getDocument('global', 'global');\n return (\n \n \n \n
{children}
\n \n \n \n );\n}\n```\n\n## Step 4: Homepage with blocks\n\n```typescript\n// app/page.tsx\nimport { getDocument } from '@/lib/content';\n\nexport default function Home() {\n const page = getDocument('pages', 'home');\n if (!page) return

Create content/pages/home.json

;\n\n return (\n
\n {page.data.sections?.map((block, i) => (\n \n ))}\n
\n );\n}\n```\n\n## Step 5: Blog with static generation\n\n{{snippet:nextjs-blog-page}}\n\nIndividual posts with SEO:\n\n{{snippet:nextjs-post-page}}\n\n## Step 6: Richtext rendering\n\n{{snippet:richtext-renderer}}\n\n> **Never use `dangerouslySetInnerHTML`** with regex-based markdown parsers. Use `react-markdown` with `remark-gfm`.\n\n## Step 7: Block rendering\n\n{{snippet:block-renderer}}\n\n## Step 8: SEO metadata\n\n{{snippet:seo-metadata}}\n\n## Step 9: i18n (optional)\n\n{{snippet:i18n-config}}\n\n## Step 10: Deployment\n\n{{snippet:deploy-fly}}\n\n## The build pipeline integration\n\nWhen you run `next build`, Next.js:\n1. Reads all content from `content/` via your loader functions\n2. Pre-renders all pages via `generateStaticParams`\n3. Generates SEO metadata via `generateMetadata`\n4. Outputs to `.next/` (or `.next/standalone` for Docker)\n\nThe CMS build pipeline (`npx cms build`) generates additional files:\n- `sitemap.xml`, `robots.txt`, `feed.xml`\n- `llms.txt`, `llms-full.txt` for AI discovery\n- Per-page `.md` files\n\nFor a Next.js site, you typically use Next.js's own `app/sitemap.ts` and `app/robots.ts` instead of the CMS build pipeline.\n\n## Key patterns\n\n1. **Server Components by default** — all content reads happen server-side\n2. **`\"use client\"` only where needed** — theme toggle, search, markdown renderer\n3. **`generateStaticParams`** — pre-generate all pages at build time\n4. **`generateMetadata`** — SEO from CMS `_seo` fields with fallbacks\n5. **Never hardcode content** — everything from CMS JSON files\n6. **Filter by published** — always check `status === \"published\"`", "excerpt": "Overview\n\nThis guide walks you through building a complete Next.js site with @webhouse/cms. The CMS handles content storage and editing. Next.js handles rendering and routing.\n\n Step 1: Project setup\n\n{{snippet:create-project}}\n\nOr start from the Next.js boilerplate:\n\nbash\nnpm create @webhouse/cms m", "seo": { "metaTitle": "Next.js Integration Guide — webhouse.app Docs", "metaDescription": "Complete guide to building a Next.js App Router site with @webhouse/cms — from content reading to deployment." }, "createdAt": "2026-03-30T12:14:24.905Z", "updatedAt": "2026-03-30T12:14:24.905Z" }