javascript - 在 Next.js 中使用带有 MDX 的 Remark 和 Rehype 插件(使用 @next/mdx)

Question

我试图通过 @next/mdx 使用 Github Flavored Markdown，但我似乎无法弄清楚如何将插件与代码一起使用。这是我所做的:

(我正在关注 Next.js 文档:https://nextjs.org/docs/advanced-features/using-mdx)

---

初始化应用程序

1. 我使用命令创建了 Next.js 应用

yarn create next-app next-gfm

2. 然后我将所需的模块添加到

yarn add @next/mdx @mdx-js/loader

3. 在 pages/ 目录中，我删除了自动生成的 index.js 文件并使用 替换它>index.mdx 文件。

从这里开始，我为我的 next.config.js 文件使用了以下配置。

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

如果我们使用 yarn dev 运行代码，到目前为止一切正常。

添加 GFM

这里是主要问题所在。我现在使用以下命令安装了以下软件包以使用 Github Flavored Markdown:

yarn add remark-gfm rehype-stringify

导入语法错误？

我尝试使用语法在 next.config.js 中导入模块

import remarkGfm from 'remark-gfm'

但这给了我以下错误:

import remarkGfm from 'remark-gfm'
^^^^^^

SyntaxError: Cannot use import statement outside a module

使项目成为模块

我还尝试在我的 package.json

顶部添加以下行

"type" : "module",

但这似乎与用于导入 @next/mdx 的 require 语法冲突:

const withMDX = require('@next/mdx')({
...

这给了我错误:

Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

使用旧的 import() 语法

我在网上做了一些搜索，找到了 import() 语法。我尝试这样做，我的 next.config.js 现在看起来像:

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
    rehypePlugins: [rehypeStringify],
  },
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

我尝试使用 yarn dev 运行它，一切正常，除了没有任何 markdown 插件在运行。 (基本 Markdown 是有效的，但如果我尝试使用脚注或表格，它会呈现为纯文本)。

谁能解释一下如何将外部插件(例如 Github Flavored Markdown)与 MDX 和 Next.js(使用 @next/mdx 包)结合使用？

引用

这是我完整的项目结构和(相关)文件:

next-gfm
  |_ pages
       |_ index.md
  |_ package.json
  |_ next.config.js

文件

index.md

# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

package.json

{
  "name": "next-mdx-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^2.1.1",
    "@next/mdx": "^12.1.5",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "rehype-katex": "^6.0.2",
    "rehype-stringify": "^9.0.3",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "remark-mdx": "^2.1.1"
  },
  "devDependencies": {
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5"
  }
}

next.config.js

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
    rehypePlugins: [rehypeStringify],
  },
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

Answer 1

如果将配置文件重命名为 next.config.mjs，则支持 ES 模块。

来源

• https://stackoverflow.com/a/69781269/4811678
• https://nextjs.org/docs/api-reference/next.config.js/introduction

在你的情况下它可能看起来像，

next.config.mjs

import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
    rehypePlugins: [rehypeStringify],
  },
})

export default withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})