CODEWITHSUNDEEP
next.js
oykn
oykn

Reputation: 190

How can use .mdx folder in Nextjs v13?

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.

Upvotes: 5

Views: 1429

Answers (1)

Mnengwa
Mnengwa

Reputation: 327

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.

Upvotes: 1

Related Questions