MDX Using file based routing

File based routing is a feature that allows you to create pages by placing files in the app directory.

For example, this page is located at src/app/docs/file-based-routing/page.mdx.

See more: Using file based routing

Import React Component

Just like you would do in a normal React component.

import HelloMDX from "./hello-mdx";
 
<HelloMDX />;

Import another MDX file

We can directly import the MDX file as a React component. Next.js use remark-mdx-frontmatter as the plugin to extract the frontmatter metadata from the MDX file.

Remember to add dependency to your package.json and add the plugin to remarkPlugins in next.config.ts.

import {
  default as ChildMDX,
  frontmatter as childFrontmatter,
} from "./child.mdx";

childFrontmatter

This is the frontmatter metadata of the child page.

{
  "title": "Child MDX file",
  "publishedAt": "2025-01-23",
  "summary": "This is a child page mdx file",
  "image": "https://picsum.photos/200/300",
  "author": "John Doe"
}

Child page content

Note

Theremark-mdx-frontmatterplugin, which is used to extract the frontmatter metadata from the MDX file, exports the metadata asfrontmatterbut it may conflict with thefrontmatterin the current page. So we rename it tochildFrontmatterto avoid conflict.

Github Flavored Blockquotes with Alert

This is a default blockquote without any special styling.

Note

Provides additional information or context about the topic. Use this for general information that you want to highlight.

Tip

Suggests a helpful way to use a feature or to accomplish a task. Perfect for sharing best practices and useful suggestions.

Important

Crucial information necessary for users to succeed. Use this for must-know information.

Warning

Warns users of potentially dangerous effects of an action. Helps prevent user mistakes before they occur.

Caution

Explains dangerous consequences of an action. Use this for serious warnings about risky actions.