# Next.js boilerplate with MDX blog

> A file-based blog: posts are MDX files in `content/blog`, compiled at build time by @next/mdx. Ships validated frontmatter, a prerendered index and post pages, a per-post OG image, an RSS 2.0 feed and sitemap entries.

Posts are files in your repo. Reviewed in a pull request, shipped with the code.

- **Category:** Content
- **Pricing:** Free. No vendor, no seats, no API quota. The only cost is build time.
- **Best for:** Engineering blogs, changelogs, docs-adjacent writing and any site where the writers already have commit access. Best when posts should go through review with the code they describe. Also when a post needs to import a real component from the app.
- **Conflicts with:** blog-sanity, blog-payload
- **Vendor docs:** https://nextjs.org/docs/app/guides/mdx

## Trade-offs

- Publishing needs a deploy. A typo fix is a commit, a build and a rollout. Fine for engineers. Painful for a marketing team that expects a "publish" button.
- No editor. Writers work in a code editor with YAML frontmatter and Git. The only preview link is a deploy preview, and the only permissions are repository access.
- No image pipeline. Images live in `public/`, and you size and compress them. A hosted CMS gives you transforms and a CDN.
- Content and code share a release cycle. Reverting a bad deploy reverts the posts published in it, and a content-only change still runs your whole build.
- Everything is yours. No API keys to rotate, no dataset to lose access to, no pricing change to absorb. The whole archive greps in one command.

## Known fixes it ships

- [MDX in the App Router without shipping a compiler](https://agenticboilerplate.com/cookbook/blog-mdx/mdx-without-a-runtime): next-mdx-remote compiles every post on every request. Compile at build time with @next/mdx instead, and keep frontmatter with gray-matter.
- [OG images that render your font, not Noto](https://agenticboilerplate.com/cookbook/blog-mdx/og-images-that-render-your-font): ImageResponse has no system fonts and silently falls back. Load a static TTF from disk, and know why woff2 and variable fonts fail.
- [An RSS feed that actually validates](https://agenticboilerplate.com/cookbook/blog-mdx/rss-that-validates): Unescaped ampersands, ISO dates and a missing atom:link are why feed readers reject your feed. Generate it as a static route with escaped text.
- [A sitemap and canonical URLs that do not fight each other](https://agenticboilerplate.com/cookbook/blog-mdx/sitemap-and-canonical-urls): lastModified from new Date() teaches crawlers to ignore your dates, and a canonical built from request headers points at your preview deploys.
- [Syntax highlighting without a 300kb bundle](https://agenticboilerplate.com/cookbook/blog-mdx/syntax-highlighting-without-a-huge-bundle): Prism and highlight.js in a client component ship a parser to every reader. Highlight at build time with a rehype plugin and ship CSS instead.

## Generate it

[Build a repo with MDX blog](https://agenticboilerplate.com/build?b=blog-mdx)

---

Agentic Boilerplate: A Next.js repo your agent already knows. Free during launch, then $99 once.

- Site map for agents: https://agenticboilerplate.com/llms.txt
- Public API: https://agenticboilerplate.com/openapi.json
- Contact: agenticstudio@gmail.com