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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!