A beginner-friendly tutorial to level up your Next.js development with MDX
Bikash Jaiswal
Get exclusive content, early access to new articles, and insights on software development, system design, and entrepreneurship delivered to your inbox.
You can use your JSX Component inside your markdown file.
npm install @next/mdx @mdx-js/loader @mdx-js/react
The next.config.js file tells the framework that files with .md or .mdx extensions should also be treated as pages/routes at build time because the blog folder that contains the articles lives in the pages directory.
1const withMDX = require('@next/mdx')()
2
3/** @type {import('next').NextConfig} */
4const nextConfig = {
5 // Configure `pageExtensions` to include MDX files
6 pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
7 // Optionally, add any other Next.js config below
8}
9
10module.exports = withMDX(nextConfig)ref: https://codesandbox.io/s/next-mdx-blog-7o50q?file=/pages/blog/post-1/index.mdx