在Next.js中为MDX添加自定义布局

Question

在我的Next.js网站上，我想要MDX和TypeScript-React页面。MDX页面应该自动以默认布局呈现(例如应用的样式，页眉/页脚)，以便非技术用户更容易添加页面。TypeScript-React页面不应该有任何默认的布局，因为我想要完全的可定制性。

我试过了:

• 查看Next.js文档和一些教程，建议在每个MDX帖子(如export default ({ children }) => <MyLayoutComponent>{children}</MyLayoutComponent>)的底部添加导出。但是，这并不符合非技术用户轻松添加上述页面的标准。
• 根据一些教程的建议，将布局添加到_app.tsx。然而，这会更新我所有的页面，所以我不能在我的TypeScript-React页面上获得完全的可定制性。
• 查看新的测试应用程序文件夹。不幸的是，MDX还没有得到新的测试应用程序文件夹的正确支持，所以涉及它们的解决方案似乎不相关。

Answer 1

您可以通过检测某些东西是否在您的_app.tsx中是MDX组件，然后在此条件下渲染来修复此问题。

检测MDX组件

当您有一个MDX页面时，应该呈现MDXContent组件。在生产环境中，函数名被缩小了，所以我们不能使用Component.name。作为解决方案，您可以添加我的自定义插件recma-mdx-displayname，以便MDX@next/mdx生成的代码被赋予MDXContent的displayName属性。安装插件:

npm install recma-mdx-displayname

在next.config.js:

中启用它

const withMDX = require("@next/mdx")({
options: {
// add it here!
recmaPlugins: [require("recma-mdx-displayname")]
}
})
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
}
module.exports = withMDX(nextConfig)

使用.displayName属性来测试组件，例如在_app.tsx:

import "../styles/globals.css"
import type { AppProps } from "next/app"
export default function App({ Component, pageProps }: AppProps) {
// Use Component.displayName to check for MDXContent
// MDX pages have default styles applied and a header
if (Component.displayName === "MDXContent") {
return (
<div className="mdx-content">
<header>
<h1>My blog</h1>
</header>
<Component {...pageProps} />
</div>
)
}
// Other pages are rendered directly
return <Component {...pageProps} />
}