---
title: "Next minimal"
description: "A minimal Next.js example that renders different content formats with Comark Content."
canonical_url: "https://content.comark.dev/examples/framework/next"
---
# Next minimal

> A minimal Next.js example that renders different content formats with Comark Content.

The React counterpart to the [Nuxt minimal example](https://content.comark.dev/examples/framework/nuxt): one landing page, four content formats, one component library — here on Next.js (App Router) with HeroUI.

- `YAML` and `JSON` are data bound straight into a component.
- `Markdown` and `json-render` specs both parse to a Comark AST and render through `<MarkdownDocument>` with the same components map.

The Content instance runs inside the app, so Server Components read content directly with `content.get()` — no data API in between. These pages are static, so those reads run at build time and ship as prerendered HTML. Switch formats from the header.

It also doubles as the bundled-serverless harness: `pnpm build` writes a snapshot, `outputFileTracingIncludes` carries it into the standalone output, and the built server keeps serving every format with the `content/` directory gone.

::tip{to="https://content.comark.dev/deployment/with-a-snapshot#nextjs"}
Setting up your own app? Follow the [Next.js integration guide](https://content.comark.dev/integrations/nextjs). [Deploy with a content snapshot](https://content.comark.dev/deployment/with-a-snapshot#nextjs) covers this deployment shape and the cold-start check.
::

::code-explorer
```yaml [props]
org: comarkdown
repo: comark-content
path: examples/next/minimal
defaultValue: src/lib/content.ts
```
::

::browser{src="https://comark-content-next.vercel.app"}
::


## Sitemap

See the full [sitemap](https://content.comark.dev/sitemap.md) for all pages.