我试图使用@next/mdx使用Github风味的Markdown，但我似乎无法弄清楚如何在代码中使用插件。 这是我所做的：
(我正在跟随下一步.js文档：https://nextjs.org/docs/advanced-features/using-mdx)
初始化应用程序
1.我使用命令创建了下一个.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
使项目成为module
我还尝试在package.json顶部添加以下行
"type" : "module",
但这似乎与用于导入@next/mdx的必要语法冲突：
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运行它，一切正常，除了没有一个降价插件根本无法运行。(基本降价正在工作，但如果我尝试使用脚注或表格，它会呈现为纯文本)。
谁能解释一下如何继续使用外部插件(例如 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'],
})
如果将配置文件重命名为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'],
})
next-mdx-remoteusers：
运行npm i remark-gfm
创建一个文件mdSerializer.ts，并在其中：
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';
const mdSerialize = async (source: string) => {
return await serialize(source, {
mdxOptions: { remarkPlugins: [remarkGfm] },
});
};
export { mdSerialize };
将mdSerialize导入到通常导入serialize的任何位置
有关serializeAPI 的更多详细信息，请单击此处
Gfm来自原始 MDX 站点的示例，此处