12

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

Mirado Andria
  • 301
  • 3
  • 9
  • I assume the app-directory support for MDX is still being developed. You can see a disabled MDX entry in the beta docs (https://beta.nextjs.org/docs). In the meantime, you should still be able to use the pages-directory just as before. – Jonathan Wieben Nov 18 '22 at 20:08
  • Yes, as you said, the doc is still not available. I tried MDX with the app directory, it works as a client component but not as a page – Mirado Andria Nov 19 '22 at 17:45
  • @maxcountryman - when awarding the bounty, it looks to be like all three answers are generated by feeding the question into an AI tool. I.e. the people who've answered don't actually understand the question, and the answers may or may not be garbage. – DavidW Dec 04 '22 at 20:10
  • agree, with all of these AI tools SO will be filled by fake answers or questions ... – Mirado Andria Dec 06 '22 at 11:29
  • 1
    GitHub discussion: https://github.com/vercel/next.js/issues/42757 – pomber Jan 02 '23 at 15:18

2 Answers2

2

@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"

chrisweb
  • 1,428
  • 19
  • 25
1

As per the comment by Mirado Andria the docs are not complete and don't work as they should, had to play around a lot but I got to having full features and using .mdx as in pages directory - or even better.

If anyone whats a quick starter or a lot of code to steal, here it is - https://github.com/beeinger/next-mdx-blog

Disclaimer: It's too much code to just explain in a comment, the repo says it all

beeinger
  • 141
  • 1
  • 4