Implementing next-mdx-remote in Next.js

Introduction

Markdown with JSX (MDX) is a powerful way to write content-rich applications in Next.js. The next-mdx-remote library allows us to load MDX from various sources, such as CMSs or APIs, and render it dynamically. In this tutorial, we will explore how to integrate next-mdx-remote in a Next.js 15 application using the App Router and load raw MDX content.

Prerequisites

Before getting started, ensure you have:

Node.js 18+ installed
A Next.js 15 project set up (npx create-next-app@latest)
Basic knowledge of Next.js and MDX

Step 1: Install Dependencies

Run the following command to install the required dependencies:

npm install next-mdx-remote next-mdx-remote/serialize remark-gfm remark-math rehype-slug

Step 2: Create an MDX Rendering Component

Create a new component MDXRenderer.tsx inside the components folder:

"use client";
 
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import React from "react";
 
interface MDXRendererProps {
  source: MDXRemoteSerializeResult;
}
 
const MDXRenderer: React.FC<MDXRendererProps> = ({ source }) => {
  return <MDXRemote {...source} />;
};
 
export default MDXRenderer;

Step 3: Create an MDX Fetching Function

Next, create a helper function to serialize and fetch the MDX content in lib/mdx.ts:

import { serialize } from "next-mdx-remote/serialize";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
 
export async function getMdxContent(content: string) {
  return await serialize(content, {
    mdxOptions: {
      remarkPlugins: [remarkGfm, remarkMath],
      rehypePlugins: [rehypeSlug],
    },
  });
}

Step 4: Implement Dynamic MDX Rendering in a Page

Now, create a dynamic page to display the MDX content. Inside app/mdx/page.tsx, add the following code:

import MDXRenderer from "@/components/MDXRenderer";
import { getMdxContent } from "@/lib/mdx";
 
const mdxContent = `
# Hello MDX
 
This is a sample MDX content with **bold text** and a [link](https://nextjs.org/).
 
> Blockquotes work too!
 
\`\`\`tsx
console.log("Hello, Next.js 15!");
\`\`\`
`;
 
export default async function MdxPage() {
  const mdxSource = await getMdxContent(mdxContent);
  return (
    <div className="prose mx-auto p-5">
      <MDXRenderer source={mdxSource} />
    </div>
  );
}

Step 5: Test the MDX Integration

Start the development server:

npm run dev

Navigate to http://localhost:3000/mdx, and you should see the rendered MDX content!

Conclusion

Using next-mdx-remote, you can load and render raw MDX dynamically in Next.js 15 with the App Router. This approach enables fetching MDX from various sources, making it ideal for blog engines, CMS integrations, and dynamic documentation sites.

Implementing next-mdx-remote in Next.js

On this page