Next.js MDX

Expert guidance on using Markdown and MDX in Next.js — @next/mdx setup, custom components, remark/rehype plugins, frontmatter, and dynamic imports.

@doc-version: 16.2.6

Core Concepts

MDX = Markdown + JSX — เขียน React components ใน markdown files ได้:

• .mdx files ทำหน้าที่เป็น pages/routes ได้โดยตรง
• Import MDX เป็น React components
• Custom components map กับ HTML elements
• รองรับ remark/rehype plugins

Guidelines

1. Installation