How to Create a Blog Website Using Next.js

Why Next.js for a Blog?

Static generation for speed, dynamic routing for posts, SEO out of the box.

Project Setup

Copy
bash
npx create-next-app@latest my-blog
cd my-blog
npm install tailwindcss gray-matter react-markdown

Creating Posts in Markdown

Copy
markdown
---
title: "My First Post"
date: "2026-03-01"
excerpt: "My first blog post!"
---

## Introduction

Welcome to my blog!

\`\`\`javascript
console.log("Hello World!");
\`\`\`

Reading Markdown Files

Copy
typescript
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export function getAllPosts() {
  const postsDir = path.join(process.cwd(), 'src/posts');
  const files = fs.readdirSync(postsDir);

  return files.map(filename => {
    const content = fs.readFileSync(path.join(postsDir, filename), 'utf-8');
    const { data, content: body } = matter(content);
    return { slug: filename.replace('.md', ''), ...data, content: body };
  });
}

Dynamic Routes

Copy
typescript
export function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

export default function PostPage({ params }) {
  const posts = getAllPosts();
  const post = posts.find(p => p.slug === params.slug);
  return (
    <article className="prose max-w-3xl mx-auto py-10">
      <h1>{post.title}</h1>
      <ReactMarkdown>{post.content}</ReactMarkdown>
    </article>
  );
}

Deploy to Vercel

Copy
bash
git add .
git commit -m "my blog"
git push

Connect to Vercel — deployed in minutes, free forever.

Conclusion

Next.js + Markdown + Vercel is the perfect modern blog stack.