【问题标题】：Using remark and rehype plugins with nextjs-13在 nextjs-13 中使用 remark 和 rehype 插件
【发布时间】：2023-02-26 19:56:03
【问题描述】：

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

文件夹结构（跳到 '问题'实际问题部分）：

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

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

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);

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

最后，页面.jsx

import Foo from "./test.mdx";

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

和布局.jsx

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

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

问题

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

有什么建议么？谢谢！

【问题讨论】：

标签： reactjs next.js nextjs13

【解决方案1】：

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

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

【讨论】：