Integrating Comark with Next.js

This example uses Next.js App Router with Comark as the Markdown renderer.

How it works

Instead of using the typical gray-matter + remark + rehype pipeline, we use Comark's framework-agnostic API:

1. Read markdown files — Load .md files from the content/posts/ directory
2. Parse with Comark — Call parseMarkdown() to build the AST and extract frontmatter
3. Static generation — Use generateStaticParams for full SSG
4. Render with React — Use MarkdownDocument from @comark/react with custom components

import { parseMarkdown } from 'comark'
import { MarkdownDocument } from '@comark/react'
import shiki from 'comark/plugins/shiki'
import Alert from '@/components/Alert'
import CodeBlock from '@/components/CodeBlock'

const tree = await parseMarkdown(content, {
  plugins: [shiki()],
})

// In your Server Component:
// <MarkdownDocument value={tree} components={{ Alert, pre: CodeBlock }} />

Custom components

You can register any number of custom components. Each one receives props and children from the Comark AST. This example maps CodeBlock to pre to add a copy button while keeping source extraction on the server.

export default function Alert({ type = 'info', children }) {
  return (
    <div className={`alert alert-${type}`} role="alert">
      {children}
    </div>
  )
}

This makes it easy to extend your Markdown with reusable, styled components.