Tutorial

1. Landing page: one fixed homepage entry with a title and SEO metadata, and live previews.

2. Content blocks: a list of text, image and weather blocks that editors arrange freely.

3. Shared root: a settings root with the header and footer text used on every page.

4. Blog: a blog overview with nested posts, dedicated routes and previous/next links.

5. Catch-all route: one route that renders every page, so editors can build their own page tree.

Before you start

Set up a Next.js project with Alinea by following the Quickstart: alinea init gives you the API route, the dev and build scripts and a cms.ts file that you replace in step 1. The tutorial uses the App Router, TypeScript and Next.js 16.

Conventions used in every step

• One folder per page type and block type. Each folder holds a schema file (LandingPage.schema.tsx) and a server component that renders it (LandingPage.tsx). Page types live in entries/, block types in blocks/.

• Components fetch their own data. Every page component queries the entry it renders and exports its own generateMetadata. The files in app/ stay thin and only pass route parameters along.

• The config is cms.tsx in the project root, and the @/* path alias in tsconfig.json points to the root, so imports read @/cms and @/entries/.... If your project keeps its code in src/, put these folders there instead.

Because each component loads its own data, you can make any of them a cached component when it fits. Step 2 does this for a block that calls a weather API.