NextJS TypeScript中导入Markdown报错，如何显示纯Markdown？

1. 确保类型声明正确 #

你已经创建了markdown.d.ts，请确认内容如下，保证TypeScript能识别.md文件为字符串模块：

declare module '*.md' {
  const content: string;
  export default content;
}

将该文件放在项目根目录或src/types下，若tsconfig.json未自动识别，可在include数组中添加该文件路径。

2. 配置Webpack加载器解析Markdown文件 #

Next.js默认未配置.md文件的处理规则，需要添加raw-loader将Markdown作为纯文本加载：

• 先安装依赖：

  npm install raw-loader --save-dev
  

• 在项目根目录的next.config.js中添加Webpack配置：

  module.exports = {
    webpack: (config) => {
      config.module.rules.push({
        test: /\.md$/,
        use: 'raw-loader',
      });
      return config;
    },
  };
  

3. 修改组件代码显示纯Markdown #

将导入的Markdown内容放在<pre>标签中，保留原格式显示：

import React from "react";
import markdown from "./assets/1.md";

const Post1 = () => {
  return <pre>{markdown}</pre>;
};

export default Post1;

<pre>标签会保留文本中的换行、空格等格式，完美呈现纯Markdown内容。

错误原因说明 #

之前的报错是因为Webpack没有找到能处理.md文件的加载器，默认会尝试将其当作JavaScript模块解析，而Markdown文件格式不符合JS模块规范，因此需要用raw-loader将其转为纯文本字符串加载。

内容的提问来源于stack exchange，提问作者Vitor Koch