How to Build a Blog with Next.js and MDX

🚀 Introduction

Building a blog with Next.js and MDX combines the power of React components with the simplicity of Markdown. This approach gives you the best of both worlds: easy content creation and dynamic interactivity.

In this comprehensive guide, we'll walk through creating a modern blog that's fast, SEO-friendly, and easy to maintain.

⚙️ Project Setup

Let's start by creating a new Next.js project with TypeScript:

npx create-next-app@latest my-blog --typescript --tailwind --eslint --app

Next, install the necessary MDX dependencies:

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

📝 MDX Configuration

Configure Next.js to handle MDX files by updating your next.config.js:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

This configuration allows Next.js to process both Markdown and MDX files as pages.

📁 Blog Structure

Create a well-organized structure for your blog posts:

src/
├── app/
│   ├── blog/
│   │   ├── [slug]/
│   │   │   └── page.tsx
│   │   └── page.tsx
│   └── layout.tsx
├── content/
│   └── posts/
│       ├── first-post.mdx
│       └── second-post.mdx
└── components/
    ├── MDXComponents.tsx
    └── BlogPost.tsx

This structure keeps your content separate from your application logic, making it easier to manage and maintain.

🎨 Styling & Components

Create custom components for your MDX content to ensure consistent styling:

// components/MDXComponents.tsx
import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => (
      <h1 className="text-4xl font-bold mb-6">{children}</h1>
    ),
    h2: ({ children }) => (
      <h2 className="text-3xl font-semibold mb-4 mt-8">{children}</h2>
    ),
    p: ({ children }) => (
      <p className="mb-4 leading-relaxed">{children}</p>
    ),
    ...components,
  }
}

This approach gives you full control over how your content is rendered while maintaining the simplicity of Markdown.

🚀 Deployment

Deploy your blog easily with Vercel:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

🎯 Conclusion

You now have a fully functional blog with Next.js and MDX! This setup provides:

• Fast performance with Next.js optimization
• Easy content creation with MDX
• SEO-friendly structure
• Customizable styling and components
• Simple deployment process

Start writing your first blog post and share your knowledge with the world!