What you'll build
A personal blog with Next.js where you write posts in Markdown files and static pages are automatically generated with friendly URLs. You'll have a main page listing all your posts with title, date, and tags, each post with syntax highlighting for code and the ability to use React components inside Markdown. The site will be ultra-fast because it's statically generated (SSG) and you can deploy it for free on Vercel.
Step 1: Ask an AI for the blog
I need a blog with Next.js that:
- Uses MDX for posts
- Has a page listing all posts
- Each post has metadata (title, date, tags)
- Syntax highlighting for code
- Generates static routes (SSG)
- TypeScript and Tailwind CSS
Give me the complete structure with 2 example posts.
Structure
app/
├── blog/
│ ├── page.tsx # Post list
│ └── [slug]/
│ └── page.tsx # Individual post
content/
├── posts/
│ ├── hello-world.mdx
│ └── second-post.mdx
MDX example
---
title: "My First Post"
date: "2026-01-01"
tags: ["nextjs", "tutorial"]
---
# Welcome
This is my first post with **MDX**.
<CustomComponent prop="value" />
\`\`\`typescript
const greeting = "Hello world!"
\`\`\`
Useful libraries
| Library | What for |
|---|---|
@next/mdx | MDX in Next.js |
gray-matter | Parse frontmatter |
rehype-highlight | Syntax highlighting |