Next minimal
A minimal Next.js example that renders different content formats with Comark Content.
The React counterpart to the Nuxt minimal example: one landing page, four content formats, one component library — here on Next.js (App Router) with HeroUI.
YAMLandJSONare data bound straight into a component.Markdownandjson-renderspecs 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.
Setting up your own app? Follow the Next.js integration guide step by step.
content.ts
import 'server-only'
import { comarkContent } from 'comark-content'
import fs from 'comark-content/sources/fs'
import yaml from 'comark-content/plugins/yaml'
import json from 'comark-content/plugins/json'
import jsonRender from 'comark/plugins/json-render'
import highlight from 'comark/plugins/highlight'
export const content = comarkContent({
source: fs('./content'),
plugins: [
// Parse `.yml`/`.yaml` files into content so YAML pages render alongside Markdown.
// https://content.comark.dev/plugins/built-in/yaml
yaml(),
// Parse `.json` files into content so JSON pages render alongside Markdown.
// https://content.comark.dev/plugins/built-in/json
json(),
],
markdown: {
plugins: [
// Render a Comark AST supplied as JSON (the `json-renderer` page) back to components.
// https://comark.dev/plugins/built-in/json-render
jsonRender(),
// Syntax-highlight fenced code blocks in the parsed Markdown.
// https://comark.dev/plugins/built-in/syntax-highlight
highlight(),
],
},
})