The defaults for the Next.js mdx-js plugin only allow you to use files ending in `.mdx`. You probably already have many `.md` files from existing projects, so this lesson walks you through enabling an `.md` files as well with a couple of configuration steps.

https://app.egghead.io/api/v1/lessons/react-enable-the-md-markdown-file-extension-for-next-js-pages/subtitles

Enable the `.md` Markdown File Extension for Next.js Pages

Instructor: [0:00] To use the .md extension, like contacts.md, from markdown files rather than the MDX, so I'll create this contact markdown file. We haven't properly configured it yet to support contact as a URL. We do that by going back into our config, and we need to support the md page extension.

[0:26] We also need to configure the Next MDX plugin with an object, with a property called extension. This is React JSX, so we'll start with // and we want files that end in .md. $ is the end of the file name. We want md to come before that. Because it's the extension, we'll use a dot, which we have to escape with a backslash. I'll hit save here.

[0:53] Next picks up on our change, refreshes and renders out our contact page. Now it should break our content page. If you want to support .md and .mdx, type in x with a question mark, which makes that x optional. Hit save there. It catches that change and renders out our page.

[1:14] Now, content and contact, both work because our React JSX for the extension reads files that end in .md with an optional x on it. Our page extensions support js, mdx, and md. We can use js, mdx, or md.

Enable the `.md` Markdown File Extension for Next.js Pages

Share this video with your friends