reactjsnext.jsmdxjs

How to use @next/mdx with NextJS 13 app directory?

With the new app directory, all route directories must have a page.js, page.jsx or a page.tsx file to be visible publicly (eg: mywebsite.com/about requires a file app/about/page.js). But when I try with MDX file app/about/page.mdx, and use nextMDX @next/mdx, I got a 404 not found.

Here is my next.config.mjs configuration file:

import nextMDX from "@next/mdx";
import remarkFrontmatter from "remark-frontmatter";
import rehypeHighlight from "rehype-highlight";
 
const withMDX = nextMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [remarkFrontmatter],
    rehypePlugins: [rehypeHighlight],
  },
});

const nextConfig = {
  experimental: {
    appDir: true,
  }
};

export default withMDX({
  ...nextConfig,
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

Thanks for any response

Solution

  • @next/mdx got updated on january 6, 2023, to support next.js 13 app directory

    they also added a MDX section to the nextjs 13 beta documentation

    and in the examples directory there is now an "app directory and MDX example"