Next.js中next.config.js读取.env后组件调用报fs模块不存在问题问询

next.config.js 是Next.js专属的Node服务端运行时配置文件，仅会在项目构建、服务端启动的Node环境下执行，其中依赖的dotenv、find-config、fs等都是Node.js核心模块，浏览器环境没有提供这些模块的实现。
你直接在前端组件中导入next.config.js时，前端打包工具会尝试将该文件纳入客户端产物打包流程，解析到依赖的fs模块时找不到对应实现，就会抛出该报错。注意：不要直接在前端业务代码中导入next.config.js，这不符合Next.js的设计规则。

Next.js已经原生封装了环境变量加载能力，无需手动在next.config.js中引入dotenv加载配置，你可以选择以下任意一种官方推荐的方式实现需求：

• 方案1：使用NEXT_PUBLIC_前缀暴露环境变量给前端
  将你.env文件中的API_URL重命名为NEXT_PUBLIC_API_URL，Next.js会自动将所有带该前缀的环境变量注入到前端运行环境，你可以直接在前端代码中直接读取使用，无需导入任何配置文件：

  const axiosInstance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL }); 
  

• 方案2：通过next.config.js的env配置项显式暴露变量
  如果你不想修改原环境变量的命名，可以在next.config.js中添加env配置项，手动指定需要暴露给前端的环境变量：

  // 可以删掉你之前手动加的dotenv加载代码，Next.js会自动读取.env文件
  module.exports = {
    reactStrictMode: true,
    sassOptions: {
      includePaths: [path.join(__dirname, 'styles')],
    },
    env: {
      API_URL: process.env.API_URL
    }
  }
  

  配置完成后前端可以直接读取process.env.API_URL使用，无需导入next.config.js。

内容的提问来源于stack exchange，提问作者Code Guru