Example blog article with mdx

This article shows how to configure and create blog posts in .mdx using Next.js15 and React19, including MathJax for rendering mathematical equations .。

Eq

// mdx-components.tsx
export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
        a: (props) => <Link {...(props as LinkProps)}>{props.children}</Link>,
        ...components,
    }
}

// nextjs.config.mjs
import createMDX from "@next/mdx"
import remarkMath from "remark-math"
import remarkParse from "remark-parse"
import remarkGfm from "remark-gfm"
import rehypeMathjax from "rehype-mathjax"
import rehypeSlug from "rehype-slug"

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withMDX = createMDX({
    extension: /\.mdx$/,
    options: {
        remarkPlugins: [remarkParse, remarkMath, remarkGfm],
        // Note: The plugin options {"tex": {"tags": "ams"}} are necessary
        // for rendering numbered equations.
        rehypePlugins: [[rehypeMathjax, { tex: { tags: "ams" } }], rehypeSlug],
    },
})

export default withMDX(nextConfig)