Next.js第二十章(MDX)-编程实验室

MDX

MDX是一种将Markdown和React组件混合在一起的语法，它可以在Markdown中使用React组件，从而实现更复杂的页面。另外就是我们在编写技术文档或者博客的时候，配合SSG模式，更喜欢用Markdown来编写，MDX他正好将Markdown和React组件混合在一起，实在是方便至极。

安装依赖

npminstall@next/mdx @mdx-js/loader @mdx-js/react @types/mdx

启用MDX功能

1.next.config.js配置以下内容

//next.config.jsimporttype{NextConfig}from"next";importcreateMDXfrom'@next/mdx'constwithMDX=createMDX({//extension: /\.(md|mdx)$/ 默认只支持mdx文件,如果想额外支持md文件编写次行代码。});constnextConfig:NextConfig={reactCompiler:true,pageExtensions:['js','jsx','md','mdx','ts','tsx'],};exportdefaultwithMDX(nextConfig);

2.根目录下面创建`mdx-components.tsx`文件

importtype{MDXComponents}from'mdx/types'constcomponents:MDXComponents={}exportfunctionuseMDXComponents():MDXComponents{returncomponents}

创建文件

my-project ├── app │ └── mdx-page │ └── page.(mdx/md) |── mdx-components.(tsx/js) └── package.json

代码高亮

打开编辑器-插件市场-搜索MDX-安装MDX插件

基础使用

可以支持(Markdown语法 +React组件 +HTML标签)

# welcome to MDX 这是一段文字，**他加粗了**，并且有重点内容`important`。 - one - two - three <div className='bg-red-500'> <p>自定义标签</p> </div>

引入自定义组件

引入自定义组件一定要跟md语法之间空一行，否则会报错

src/app/home/page.mdx

import MyComponent from './my-component'; //引入自定义组件一定要跟md语法之间空一行，否则会报错。 # welcome to MDX 这是一段文字，**他加粗了**，并且有重点内容`important`。 - one - two - three <div className='bg-red-500'> <p>自定义标签</p> </div> <MyComponent />

mdx文件无法实现一些复杂的交付逻辑，如果有复杂的交付逻辑，我们可以使用React组件来实现，然后在mdx文件中引入即可。

//src/app/home/my-component.tsx'use client'import{useState}from'react';exportdefaultfunctionMyComponent(){const[count,setCount]=useState(0);return(<div><p>Count:{count}</p><button onClick={()=>setCount(count+1)}>Increment</button></div>);}

全局样式

如果你希望在这个项目中修改所有的MDX文件的样式，你可以使用mdx-components.tsx文件来修改。

//mdx-components.tsximporttype{MDXComponents}from'mdx/types'constcomponents:MDXComponents={h1:({children})=><h1 className='text-2xl text-red-400 font-bold'>{children}</h1>,//# 代表h1 你可以自定义修改样式li:({children})=><li className='list-disc text-blue-500 list-inside'>{children}</li>,//- 代表li 你可以自定义修改样式//...你可以自定义修改更多的样式}exportfunctionuseMDXComponents():MDXComponents{returncomponents}

远程加载mdx/md文件

如果你的MDX文件存储在远程服务器上，你可以使用远程mdx来加载文件。

npminstallnext-mdx-remote-client

//src/app/home/page.tsximport{MDXRemote}from'next-mdx-remote-client/rsc'exportdefaultasyncfunctionHome(){constres=awaitfetch('https://nextjs-docs-henna-six.vercel.app/xm.mdx')//链接是彩蛋constsource=awaitres.text()return(<MDXRemote source={source}/>);}