如何将 Markdown 文件作为字符串导入 Next.js在客户端和服务器端工作?
最佳答案
你可以配置你的 Next.js webpack 加载器来加载 markdown 文件并将它们作为字符串返回,例如:
docs/home.md
# Home
This is my **awesome** home!
pages/index.js
import React from 'react';
import markdown from '../docs/home.md';
export default () => {
return (
<div>
<pre>{markdown}</pre>
<small><i>Import and render markdown using Next.js</i></small>
</div>
);
};
package.json
{
"name": "example",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"file-loader": "^1.1.6",
"next": "^4.2.1",
"raw-loader": "^0.5.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
next.config.js
module.exports = {
webpack: (config) => {
return Object.assign({}, config, {
externals: Object.assign({}, config.externals, {
fs: 'fs',
}),
module: Object.assign({}, config.module, {
rules: config.module.rules.concat([
{
test: /\.md$/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]',
},
},
{
test: /\.md$/,
loader: 'raw-loader',
}
]),
}),
});
}
};
运行时:
$ npm run dev
会出现这样的情况:
使用 Markdown 字符串,您可以做任何您想做的事情。例如,使用 marksy 处理它.
关于javascript - 在 Next.js 中将 markdown 文件作为字符串导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47954367/