Building Static Sites with Next.js and Markdown

Next.js

Next.js is the ultimate toolkit for building modern static sites with dynamic power.

✍️ Markdown + MDX

Use next-mdx-remote or contentlayer to render blog content from markdown:

tsxCopy
import { MDXRemote } from 'next-mdx-remote';

export default function Post({ source }) {
  return <MDXRemote {...source} />;
}

📁 Recommended Folder Structure

/content
  /posts
    hello-world.mdx
/pages
  /blog
    [slug].tsx

🌎 Deploy to Vercel

bashCopy
git push origin main
# Auto-deploy to your-domain.vercel.app

Next.js lets you start static and scale to dynamic — all in one framework.

“Static first, dynamic as needed.” — Guillermo Rauch