Next.js MDX

MDX = Markdown + JSX，在 Markdown 中直接使用 React 组件。

bash

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

tsx

// mdx-components.tsx
export function useMDXComponents(components) {
  return { h1: (props) => <h1 className="text-2xl" {...props} />, ...components }
}

mdx

// hello.mdx → /hello 页面
# 标题
<Button>交互按钮</Button>

Next.js MDX ​

Next.js MDX