How can use .mdx folder in Nextjs v13? - next.js

Question

next.config.js
/** #type {import('next').NextConfig} */
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
// https://github.com/remarkjs/remark-gfm#install
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
providerImportSource: "#mdx-js/react",
},
})
const nextConfig = withMDX ({
reactStrictMode: true,
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
module.exports = nextConfig
/page/read.mdx
this code in next 12 true working.
but , next.config in next 13
/** #type {import('next').NextConfig} */
const withMDX = require('#next/mdx')({
extension: /\.mdx?$/,
options: {
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
// https://github.com/remarkjs/remark-gfm#install
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
providerImportSource: "#mdx-js/react",
},
})
const nextConfig = withMDX ({
reactStrictMode: true,
swcMinify: true,
experimental: {
appDir: true,
},
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
module.exports = nextConfig
app> page.mdx not working. 404 page.
How can I get mdx extension when creating page in routing under app folder.

Answer 1

I wanted to do the same thing. Earlier, they had mentioned that you'll need to import the .mdx file for it to work under the caveats of using the app directory here: https://beta.nextjs.org/docs/app-directory-roadmap#caveats I guess they are re-working that.
However, you'll need to mark the whole page as a client component, and import it like so:
// directory -> app/page.jsx
"use client";
// mdx file -> app/(articles)/(philosophy)/hello.mdx
import Hello from './(articles)/(philosophy)/hello.mdx';
const Home = () => {
return <Hello />;
};
export default Home;
You'll see your mdx file content now rendered.