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.
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.