Pagesmith + Next.js

App Router pages rendered from local markdown with @pagesmith/site.

Back to the article index

Markdown article

Kitchen Sink

A single page to verify shared markdown and code-block behavior in the Next.js example.

April 12, 20262 min read
  • markdown
  • code-blocks
  • regression

Kitchen Sink

This page intentionally stacks multiple markdown features in one place so you can verify the rendered output inside a Next.js route.

Note

The surrounding layout is custom Next.js UI. The .prose content area, code-block chrome, and copy/tab behavior all come from Pagesmith.

GFM mix

Feature Example
Strikethrough old new
Task list See below
Table This one
  • Task done
  • Task open

Alerts

Tip

Use a root-mounted runtime component when you want copy buttons and tabs to work across every route.

Important

This app keeps content loading, markdown rendering, and shared presentation/runtime behavior on @pagesmith/site while Next.js continues to own routing and layout.

Warning

Keep the Next.js layout and routing logic separate from the Pagesmith content layer so the example stays clear about ownership.

Caution

If you remove the shared Pagesmith content CSS or runtime mount, the HTML still renders, but code tabs, copy buttons, and markdown presentation will drift from the documented baseline.

Code blocks

Highlighted line and collapsed boilerplate:

server.ts
const layer = createContentLayer({ collections });const post = await layer.getEntry("posts", "hello-pagesmith");

Tabs from consecutive titled fences:

content-loader.ts
export async function getAllPosts() {  return layer.getCollection("posts");}
page.tsx
export default function Page({ html }) {  return <div className="prose" dangerouslySetInnerHTML={{ __html: html }} />;}

Diff-style rendering:

route.patch
- import { processMarkdown } from '@pagesmith/site'+ const rendered = await entry.render()

Math

Inline math works too: .

Quotes and prose

Outer quote

Nested quote

“Smart quotes” and ellipses… show up in prose, but not inside code.

Quick reference

Feature Syntax hint
Alert > [!NOTE]
Code title fenced block with title="..." meta
Collapse fenced block with collapse={...} meta
Tabs consecutive titled fenced code blocks

Footnotes

Pagesmith keeps footnotes working across the framework-hosted example too1.

Footnotes

  1. This is a lightweight regression check for the shared markdown pipeline inside a custom Next.js shell. ↩