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

// 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)