在 nextjs-13 中使用 remark 和 rehype 插件

Question

在 nextjs-13 中使用 remark 和 rehype 插件

我想尝试一下 nextjs-13 所以做了一个非常简单的博客。

文件夹结构（跳至“问题”部分了解实际问题）：

app/
  page.jsx
  layout.jsx
  test.mdx
public/
 ...
styles/
 ...
mdx-components.jsx
next.config.mjs
package.json

Run Code Online (Sandbox Code Playgroud)

所以这是一个纯粹的 nextjs-13 应用程序，所有内容仅在 app/ 目录中。

下一个配置.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);

Run Code Online (Sandbox Code Playgroud)

包.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",
  },
}

Run Code Online (Sandbox Code Playgroud)

最后是page.jsx

import Foo from "./test.mdx";

export default function Page() {
  return <Foo />;
}

Run Code Online (Sandbox Code Playgroud)

和布局.jsx

import "./global.scss";
import "../styles/prism.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Run Code Online (Sandbox Code Playgroud)

问题

当我运行这个时，接下来肯定会编译 mdx。但它是一些非常基本的开箱即用转换，不会解析代码块（所有代码显示为单个字符串），并且不会正确呈现表格。也就是说，rehypePrism 和 remarkGfm 并没有实际应用。

有什么建议么？谢谢！

Answer 1

Sil*_*ash 8

解决。在 next.config.js 中禁用mdxRs解决了该问题。

const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
  experimental: {
    appDir: true,
    mdxRs: false, // <- disabled
  },
  reactStrictMode: true,
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，9 月前
查看次数：	1097 次
最近记录：	2 年，2 月前