Step-by-Step Guide: Integrating Blogs with Next.js

In this tutorial, we will learn how to integrate blogs into a Next.js application using markdown, @next/mdx, and rehype for syntax highlighting. Let's get started!

Prerequisites

Before we begin, make sure you have the following:

Node.js installed on your system.
A basic understanding of Next.js.
A Next.js project set up.

Step 1: Install Required Dependencies

First, install the necessary packages:

npm install @next/mdx rehype-highlight

Step 2: Configure `next.config.js`

Update your next.config.js file to support MDX:

const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/
});

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

This configuration allows Next.js to process .mdx files.

Step 3: Create a Blog Post

Create a new folder for your blog content, for example, src/content/blog. Inside this folder, create a new .mdx file:

---
title: "My First Blog Post"
date: "2025-05-01"
description: "This is my first blog post using MDX in Next.js."
---

# Welcome to My Blog

This is a **bold** and *italic* paragraph.

```js
// Example code snippet
const greet = () => console.log("Hello, world!");

Step 4: Create a Blog Page

Create a new page in the pages directory to display your blog posts. For example, pages/blog/[slug].js:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';

export async function getStaticPaths() {
    const files = fs.readdirSync(path.join('src/content/blog'));
    const paths = files.map((filename) => ({
        params: { slug: filename.replace('.mdx', '') }
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params: { slug } }) {
    const markdownWithMeta = fs.readFileSync(
        path.join('src/content/blog', slug + '.mdx'),
        'utf-8'
    );

    const { data: frontmatter, content } = matter(markdownWithMeta);
    const mdxSource = await serialize(content);

    return { props: { frontmatter, mdxSource } };
}

export default function BlogPost({ frontmatter, mdxSource }) {
    return (
        <div>
            <h1>{frontmatter.title}</h1>
            <p>{frontmatter.date}</p>
            <MDXRemote {...mdxSource} />
        </div>
    );
}

Step 5: Add Syntax Highlighting

To enable syntax highlighting, update your MDX configuration in next.config.js:

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

You also need to include a CSS file for the syntax highlighting theme. For example, add the following to your globals.css:

@import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css';

Step 6: Test Your Blog

Run your development server:

npm run dev

Visit http://localhost:3000/blog/my-first-blog-post to see your blog post in action!

Conclusion

You have successfully integrated blogs into your Next.js app using markdown, @next/mdx, and rehype for syntax highlighting. Happy blogging!

Integrate Blogs With Next.js