![](/img/trans.png)
[英]Add RSS to Next.js MDX Blog while using `rss` module for Node JS . How do I convert MDX to HTML?
[英]Using Remark and Rehype plugins with MDX in Next.js (with @next/mdx)
我試圖使用 Github Flavored Markdown using @next/mdx
但我似乎無法弄清楚如何在代碼中使用插件。 這是我所做的:
(我正在關注 Next.js 文檔: https://nextjs.org/docs/advanced-features/using-mdx )
1.我使用命令創建了 Next.js App
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
運行代碼,到目前為止一切正常。
這是主要問題所在。 我現在使用以下命令安裝了以下軟件包以使用 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
的 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'],
})
如果將配置文件重命名為next.config.mjs
,則支持 ES 模塊。
來源
在你的情況下,它可能看起來像,
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'],
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.