# Next.js and MDX: A Practical Setup Guide

Canonical URL: https://www.harjotrana.com/blog/getting-started-nextjs-mdx
Author: Harjot Singh Rana
Published: 2025-09-12
Reading time: 2 min

> Wiring MDX into the App Router so posts stay Markdown but can still render React components.

Welcome to this comprehensive guide on setting up a blog using Next.js and MDX! This powerful combination allows you to write your blog posts in Markdown while leveraging the full power of React components.

## Why Choose Next.js and MDX?

**Next.js** provides:
- Static site generation (SSG) and server-side rendering (SSR)
- Fast page loads with automatic code splitting
- Built-in routing and API routes
- Excellent developer experience with TypeScript support

**MDX** brings:
- The simplicity of Markdown syntax
- The power of React components within your content
- Reusable UI components
- Rich content capabilities

## Setting Up Your Project

First, create a new Next.js project:

```bash
npx create-next-app my-blog-app
cd my-blog-app
```

Then install the required MDX dependencies:

```bash
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx next-mdx-remote
```

## Creating Your First Blog Post

Create a new `.mdx` file in your content directory:

```mdx
---
title: "My First Blog Post"
date: "2025-09-12"
author: "Your Name"
---

# Hello World!

This is my first blog post using MDX!
```

## Using React Components in MDX

One of the best features of MDX is the ability to use React components directly in your content:

```mdx
import { Alert } from '@/components/ui/alert';

<Alert variant="info">
  This is a custom React component inside my MDX content!
</Alert>
```

## Conclusion

Next.js + MDX provides an excellent foundation for modern blog development. You get the best of both worlds: the simplicity of Markdown and the power of React.

Happy blogging! 🚀

More writing: https://www.harjotrana.com/blog

---

Site guide for agents: https://www.harjotrana.com/llms.txt · Full site as Markdown: https://www.harjotrana.com/llms-full.txt · Sitemap: https://www.harjotrana.com/sitemap.xml · Developer resources: https://www.harjotrana.com/developers