Next.js MDX: Strikethrough Gone Missing in the App Router?
The Problem: You're using Next.js's powerful MDX component to create dynamic content, but you've noticed that the strikethrough text styling (using ~~ in your Markdown) isn't rendering correctly when using the App Router.
The Solution: This issue arises because of the way Next.js handles MDX components within the App Router. While MDX works beautifully in the Pages Router, there's a slight configuration step needed to ensure strikethrough works as expected in the App Router.
Here's the Breakdown:
-
Understanding the Problem: MDX relies on specific libraries to interpret and render Markdown syntax. In the Pages Router, Next.js automatically includes the necessary libraries to handle strikethrough and other formatting. However, the App Router doesn't implicitly load these libraries, requiring a minor adjustment.
-
The Solution: To fix this, you need to explicitly import the
remark-gfmplugin, which provides support for GitHub-flavored Markdown, including strikethrough. Add this line at the top of your MDX component:
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';
- Example: Let's say you have an MDX file named
my-post.mdx:
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';
export const metadata = {
title: 'My Post',
description: 'This is a post about strikethroughs'
};
export default async function PostPage() {
const { content } = await serialize('~~This text should be struck through~~', {
mdxOptions: {
remarkPlugins: [remarkGfm],
},
});
return (
<div>
<h1>{metadata.title}</h1>
<div dangerouslySetInnerHTML={{ __html: content }} />
</div>
);
}
- Explanation:
remarkGfmprovides the necessary markdown parsing logic for strikethrough.serializetakes your Markdown content and renders it using the specifiedremarkPlugins.- The
dangerouslySetInnerHTMLattribute is essential to render the output ofserializecorrectly.
Benefits of using remarkGfm:
- Improved compatibility: It ensures your MDX files render consistently with the formatting expected on platforms like GitHub, which often use GFM.
- Extended Features:
remarkGfmoffers support for additional Markdown features, including task lists, tables, and more, making your MDX files even more versatile.
Additional Tips:
- Ensure Correct Syntax: Double-check that you're using the correct
~~syntax for strikethrough in your Markdown. - Test Thoroughly: After implementing
remarkGfm, test your MDX files to ensure all Markdown features, including strikethrough, are working as expected.
By implementing this simple solution, you'll seamlessly enjoy the functionality of strikethrough in your MDX content within the Next.js App Router, creating a smooth and enjoyable user experience.
Further Resources:
