content 目录
content 目录的设计目的是：
- 以最小的改动迁移你现有的 Next.js
pages路由器，你只需要将pages目录重命名为content。 - 避免使用
page文件名约定，例如app/configuration/page.mdx->content/configuration.mdx
设置
创建你的第一个 MDX 页面，保存为 content/index.mdx：
content/index.mdx
# 欢迎使用 Nextra
你好，世界！💡
Tip
你可以将 content 目录保存在项目根目录，或者在 src 目录中。
在 next.config 文件中设置 contentDirBasePath 选项（可选）
如果你想从不同的路径提供内容，可以设置 contentDirBasePath 选项：
next.config.mjs
import nextra from 'nextra'
const withNextra = nextra({
contentDirBasePath: '/docs' // Or even nested e.g. `/docs/advanced`
})添加 [[...mdxPath]]/page.jsx 文件
将此文件放在 app 目录中，内容如下：
[[...mdxPath]]/page.jsx
import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents } 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 = useMDXComponents().wrapper
export default async function Page(props) {
const params = await props.params
const result = await importPage(params.mdxPath)
const { default: MDXContent, toc, metadata } = result
return (
<Wrapper toc={toc} metadata={metadata}>
<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
许多现有的解决方案，如
当 Markdown 内容变化时刷新 Next.js App Router
都依赖额外的依赖项，如 concurrently 和 ws。这些方法包括
Dan Abramov 使用 <AutoRefresh> 组件和开发 websocket 服务器的解决方案。
Nextra 的 content 目录提供了开箱即用的简化解决方案：
- 无需安装不必要的依赖项
- 在
content目录更改时无需重启服务器 - 热重载开箱即用
- 可以在 MDX 文件中使用
import语句，且静态图片也可以正常工作
Last updated on