Rendering Markdown in Next.js

This page lives in content/posts/hello-pagesmith.md, is loaded through createContentLayer(), and is rendered by a normal Next.js App Router route.

Why this example exists

• Keep content loading and validation on @pagesmith/site
• Let Next.js own routing, layout, metadata, and deployment
• Reuse Pagesmith’s shared markdown presentation and code-block behavior without adopting the Pagesmith Vite toolchain

Minimal content loader

1import { createContentLayer, defineConfig } from "@pagesmith/site";2import collections from "../content.config.js";34const layer = createContentLayer(5  defineConfig({6    root: process.cwd(),7    collections,8  }),9);

Rendering inside a route

1<div className="prose article-prose" dangerouslySetInnerHTML={{ __html: post.html }} />

The route never calls processMarkdown() directly. It asks the collection entry to render itself, which keeps headings, read time, code-block metadata, and shared markdown behavior aligned with the rest of Pagesmith.