content 目录
content 目录旨在：
- 以最小更改迁移现有的 Next.js
pages路由器，您只需 将pages目录重命名为content。 - 避免使用
page文件名约定，例如app/configuration/page.mdx→content/configuration.mdx
设置
创建您的第一个 MDX 页面作为 content/index.mdx：
content/index.mdx
# Welcome to Nextra
Hello, world!Tip
您可以将 content 目录保留在项目根目录中，或在
src 目录 中。
在 next.config 文件中设置 contentDirBasePath 选项（可选）
如果您想从不同的路径提供内容，可以设置
contentDirBasePath 选项：
next.config.mjs
import nextra from 'nextra'
const withNextra = nextra({
contentDirBasePath: '/docs' // 或者甚至嵌套的，例如 `/docs/advanced`
})添加 [[...mdxPath]]/page.jsx 文件
将此文件放置在 app 目录中，内容如下：
[[...mdxPath]]/page.jsx
import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents as getMDXComponents } from '../../../../mdx-components'
export const generateStaticParams = generateStaticParamsFor('mdxPath')
export async function generateMetadata(props) {
const params = await props.params
const { metadata } = await importPage(params.mdxPath)
return metadata
}
const Wrapper = getMDXComponents().wrapper
export default async function Page(props) {
const params = await props.params
const {
default: MDXContent,
toc,
metadata,
sourceCode
} = await importPage(params.mdxPath)
return (
<Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
<MDXContent {...props} params={params} />
</Wrapper>
)
}您应该得到以下结构：
- layout.jsx
- page.jsx
- index.mdx
- next.config.js
- package.json
Tip
将单一捕获所有路由 [[...mdxPath]]/page.jsx 视为通往
您的 content 目录的入口。
如果您在 next.config 文件中设置了 contentDirBasePath 选项，则应将
[[...mdxPath]]/page.jsx 放入相应目录中。
您已准备就绪！
Note
许多现有解决方案，例如
Refreshing the Next.js App Router When Your Markdown Content Changes
依赖额外的依赖项，如 concurrently 和 ws。这些方法包括
Dan Abramov 使用 <AutoRefresh> 组件和开发 WebSocket 服务器的变通方法。
Nextra 的 content 目录开箱即用，提供了一个简化的解决方案：
- 您无需安装不必要的依赖项
- 您无需在
content目录更改时重启服务器 - 热重载开箱即用
- 您可以在 MDX 文件中使用
import语句，并且 静态图像 也能正常工作
Last updated on