英文:
Using remark and rehype plugins with nextjs-13
问题
以下是翻译的部分：
"I wanted to try out nextjs-13 so made a very simple blog."
我想尝试使用nextjs-13，所以创建了一个非常简单的博客。
"Folder structure (skip to 'The Problem' section for actual issue):"
文件夹结构（跳到'问题'部分查看实际问题）：
"app/ page.jsx layout.jsx test.mdx public/ ... styles/ ... mdx-components.jsx next.config.mjs package.json"
app/ page.jsx layout.jsx test.mdx public/ ... styles/ ... mdx-components.jsx next.config.mjs package.json
"So this is a pure nextjs-13 app with all content only in the app/ directory."
这是一个纯粹的nextjs-13应用程序，所有内容都在app/目录中。
"next.config.mjs"
next.config.mjs
"import nextMDX from "@next/mdx";"
从“@next/mdx”导入nextMDX。
"import remarkGfm from "remark-gfm""
从“remark-gfm”导入remarkGfm。
"import rehypePrism from "@mapbox/rehype-prism";"
从“@mapbox/rehype-prism”导入rehypePrism。
"const nextConfig = { pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"], experimental: { appDir: true, mdxRs: true, }, reactStrictMode: true };"
const nextConfig = { pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"], experimental: { appDir: true, mdxRs: true, }, reactStrictMode: true };
"export default nextMDX({ extension: /.mdx?$/, options: { remarkPlugins: [remarkGfm], rehypePlugins: [rehypePrism], } })(nextConfig);"
导出nextMDX({ extension: /.mdx?$/, options: { remarkPlugins: [remarkGfm], rehypePlugins: [rehypePrism], } })(nextConfig);
"package.json"
package.json
{
"private": true,
"scripts": {
// ...
},
"dependencies": {
"@mapbox/rehype-prism": "^0.8.0",
"@next/mdx": "latest",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"remark-gfm": "^3.0.1",
"remark-rehype": "^10.1.0",
},
}
{
"private": true,
"scripts": {
// ...
},
"dependencies": {
"@mapbox/rehype-prism": "^0.8.0",
"@next/mdx": "latest",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"remark-gfm": "^3.0.1",
"remark-rehype": "^10.1.0",
},
}
"and finally, page.jsx"
最后，page.jsx
"import Foo from "./test.mdx";"
从“./test.mdx”导入Foo。
"export default function Page() { return <Foo /> };"
导出函数Page() { return <Foo /> }。
"and layout.jsx"
和layout.jsx
"import "./global.scss";"
导入“./global.scss”。
"import "../styles/prism.css";"
导入“../styles/prism.css”。
"export default function RootLayout({ children }) { return ( <html lang="en"> <body>{children}</body> </html> ); }"
导出函数RootLayout({ children }) { return ( <html lang="en"> <body>{children}</body> </html> ); }
"The problem"
问题
"When I run this, next certainly seems to be compiling the mdx. But it's some very basic out-of-the-box transform that does not parse code blocks (all code appears as a single string), and does not render tables correctly. That is, rehypePrism and remarkGfm are not actually being applied."
当我运行这个时，next似乎确实在编译mdx。但它是一种非常基本的开箱即用的转换，它不解析代码块（所有代码都显示为一个字符串），并且不正确地渲染表格。也就是说，rehypePrism和remarkGfm实际上并没有被应用。
英文:
I wanted to try out nextjs-13 so made a very simple blog.
Folder structure (skip to 'The Problem' section for actual issue):
app/
page.jsx
layout.jsx
test.mdx
public/
...
styles/
...
mdx-components.jsx
next.config.mjs
package.json
So this is a pure nextjs-13 app with all content only in the app/ directory.
next.config.mjs
import nextMDX from "@next/mdx";
import remarkGfm from "remark-gfm";
import rehypePrism from "@mapbox/rehype-prism";
// /** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
experimental: {
appDir: true,
mdxRs: true,
},
reactStrictMode: true,
};
export default nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypePrism],
},
})(nextConfig);
package.json
{
"private": true,
"scripts": {
// ...
},
"dependencies": {
"@mapbox/rehype-prism": "^0.8.0",
"@next/mdx": "latest",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"remark-gfm": "^3.0.1",
"remark-rehype": "^10.1.0",
},
}
and finally, page.jsx
import Foo from "./test.mdx";
export default function Page() {
return <Foo />;
}
and layout.jsx
import "./global.scss";
import "../styles/prism.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
The problem
When I run this, next certainly seems to be compiling the mdx. But it's some very basic out-of-the-box transform that does not parse code blocks (all code appears as a single string), and does not render tables correctly. That is, rehypePrism and remarkGfm are not actually being applied.
Any suggestions? Thanks!
答案1
得分: 8
已解决。在 next.config.js 中禁用 mdxRs 修复了此问题。
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
experimental: {
appDir: true,
mdxRs: false, // <- 禁用
},
reactStrictMode: true,
};
英文:
Resolved. Disabling mdxRs in next.config.js fixed the issue.
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
experimental: {
appDir: true,
mdxRs: false, // <- disabled
},
reactStrictMode: true,
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论