常见问题

1、Module not found: Can't resolve 'fs'

# 在next.config.js文件中添加以下配置
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },

在Next.js应用中，当您尝试在客户端代码中使用fs（文件系统）模块时，会遇到“module not found”错误。这是因为fs模块是Node.js的内置模块，仅在服务器端环境中可用。在客户端浏览器环境中，fs模块不可用，因此Next.js在编译客户端代码时会抛出错误。

要解决这个问题，您可以在next.config.js中修改Webpack配置，将fs模块设置为false，以告知Webpack不要尝试在客户端代码中解析fs模块。这样，Webpack就会将fs模块的所有引用替换为一个空对象，从而避免了模块未找到的错误。

需要注意的是，这种方法仅解决了客户端代码中的“module not found”错误。您仍然需要确保不在客户端代码中使用fs模块的任何功能。为了避免在客户端代码中使用fs模块，您应该将fs模块的使用限制在服务器端代码中，例如在getStaticProps或getServerSideProps函数中。

2、使用remark库将md或者mdx文件转换为html时，代码块高亮、引用快、表格语法失效的解决办法

代码块高亮使用remark-prism库

# 安装remark-prism库
npm i remark-prism

在lib/posts/index.js中导入remark-prism库，并使用该库来给转换

import prism from 'remark-prism';

  const processedContent = await remark()
    .use(gfm)
    .use(html, { sanitize: false })
    .use(prism)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

Not compatible with remark-html v13.0.2 and above #265

3、使用remark库将markdown文件内容转为html形式，<转换为了<，>转化为了>如何解决？

解决方案：

npm i remark remark-html remark-gfm remark-prism unist-util-visit

remark 是一个处理 Markdown 的库，它将 Markdown 文本转换为一个抽象语法树（AST）。抽象语法树是一种表示源代码结构的树形数据结构。在这种情况下，remark 生成了一个表示 Markdown 源代码结构的树。

自定义的 restoreSpecialCharacters 插件会对这个抽象语法树进行操作。remark 在将 Markdown 转换为 HTML 之前，会先将其转换为 AST。您的插件会在转换过程中对文本节点执行操作，还原尖括号、单引号和双引号。因此，您的插件实际上是在操作 Markdown 和 HTML 之间的转换过程产生的抽象语法树。这确保了最终生成的 HTML 中的特殊字符（尖括号、单引号和双引号）正常显示。

可以见这些issue

4、tailwind css只支持CommonJS，目前还不支持ESM。I have content declared but getting "The content option in your Tailwind CSS configuration is missing or empty" #8029

5、mjs、js、Common JS、ESM

nextjs学习笔记

常见问题