Markdown-Powered Blog

Build a statically generated blog with Markdown/MDX posts, categories, and per-post SEO metadata — a solid project for learning content-driven Next.js sites.

Beginner4-6 hours

See the build prompt Browse AI coding tools

Stack

Technology used

Next.js
TypeScript
MDX
Tailwind CSS

Required tools

AI coding tools you'll need

Claude Code
Cursor

What you'll learn

Skills you'll practice

How to structure a content-driven site with Markdown/MDX files instead of a database
How to statically generate blog post pages with generateStaticParams
How to write per-post SEO metadata and Article structured data
How to build category filtering without a backend
How to add an RSS feed and sitemap for a content site

Build process

Step-by-step build

1
Scaffold and install MDX tooling
Set up a Next.js + TypeScript + Tailwind project and install a Markdown parsing library such as gray-matter with next-mdx-remote.
2
Write sample content
Create a `content/posts/` directory and write 3-4 real sample posts in Markdown with frontmatter (title, date, excerpt, category).
3
Build a posts helper
Write a utility that reads and parses all posts at build time, sorted by date descending.
4
Build the blog index
List posts with title, excerpt, category and reading time.
5
Build the post page
Build the dynamic `/blog/[slug]` page that renders the MDX content with readable typography styling.
6
Add category pages
Build `/blog/category/[category]` pages that filter posts by category.
7
Add per-post metadata
Generate unique title, description and Open Graph image metadata from each post's frontmatter.
8
Add a feed and sitemap
Generate an RSS feed and a sitemap entry for every post.
9
Deploy
Deploy and verify the statically generated pages render correctly in production.

Starter prompt

Paste this into your AI coding tool

Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.

Prompt

Build a Markdown-powered blog using Next.js App Router, TypeScript and Tailwind CSS. Store posts as .mdx files in a content/posts directory with frontmatter fields: title, date, excerpt, category, and readingMinutes. Write a lib/posts.ts helper that reads all post files at build time using gray-matter, parses their frontmatter, and returns them sorted by date descending. Build: a /blog index page listing all posts as cards (title, excerpt, category, date, reading time); a dynamic /blog/[slug] page using generateStaticParams that renders the MDX body with readable typography (use @tailwindcss/typography); and a /blog/category/[category] page that filters posts by category. Each post page needs unique metadata generated from its frontmatter and Article JSON-LD structured data. Also generate a valid RSS feed at /rss.xml. Create 3 real, well-written sample blog posts (not lorem ipsum) about practical software topics to populate the site.

SEO

SEO considerations

Generate a unique title and meta description per post from frontmatter, not a repeated template
Use semantic <article> markup with a proper heading hierarchy inside each post
Add Article structured data (headline, datePublished, author) to every post page
Provide an RSS feed and reference it with a <link rel='alternate'> tag
Make sure statically generated post pages are included in the sitemap
Use descriptive, keyword-relevant slugs for each post instead of numeric IDs

Ship it

Deployment steps

Push to GitHub
Import into Vercel — static generation means most pages ship as pre-rendered HTML
Verify generateStaticParams produced a page for every post at build time
Set up a redirect or a friendly 404 page for removed or renamed post slugs
Submit the sitemap and RSS feed to Google Search Console

Keep building

Related projects

Beginner3-5 hours

Developer Portfolio Website

Build a personal portfolio site with a project showcase, an about page, and a contact form — a great first real project for practicing AI-assisted front-end development.

Next.jsTypeScriptTailwind CSS

Intermediate1 day