NextJS中如何配置webpack加载并渲染Markdown文件

步骤1：安装依赖 #

• 选择markdown-loader方案的话，执行以下安装命令：
  npm install markdown-loader html-loader --save-dev
  使用pnpm、yarn的场景替换为对应包管理工具的安装命令即可。

步骤2：修改next.config.js配置 #

你需要在原有配置基础上新增webpack自定义规则，同时补充缺失的Next.js阶段常量导入，修改后的完整配置如下：

const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } = require('next/constants')

module.exports = (phase) => {
    const isDev = phase === PHASE_DEVELOPMENT_SERVER;
    const isProd = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== "1";
    const isStaging = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === "1";
    const env = {
        MONGODB_URI: (() => {
            return process.env.MONGODB_URI;
        })(),
    };

    // next.config.js object
    return {
        env,
        swcMinify: false,
        webpack: (config) => {
          config.module.rules.push({
            test: /\.md$/,
            use: ['html-loader', 'markdown-loader']
          })
          return config
        }
    };
};

步骤3：使用Markdown文件 #

在页面或组件中直接导入md文件，通过dangerouslySetInnerHTML渲染即可，示例：

import content from './demo.md'

export default function MarkdownPage() {
  return <div dangerouslySetInnerHTML={{ __html: content }} />
}

注意：如果使用Next.js 13+ App Router模式，渲染Markdown的组件需要添加'use client'指令

remark-loader适配方案 #

如果要使用你之前尝试的remark-loader，先安装对应依赖：
npm install remark-loader remark-html html-loader --save-dev
将上述配置中的webpack规则替换为以下内容即可：

webpack: (config) => {
  config.module.rules.push({
    test: /\.md$/,
    use: [
      'html-loader',
      {
        loader: 'remark-loader',
        options: {
          remarkOptions: {
            plugins: [require('remark-html')]
          }
        }
      }
    ]
  })
  return config
}

内容的提问来源于stack exchange，提问作者Nikola-Milovic