Next.js中如何在getServerSideProps中从Firebase获取数据？

问题原因 #

Firebase Admin SDK依赖的@google-cloud/storage包会引入Node.js核心模块fs，而Next.js在客户端打包阶段会尝试解析这些模块，但浏览器环境不支持fs，因此抛出"Module not found: Can't resolve 'fs'"错误。

解决方案：配置Next.js Webpack忽略客户端的Node核心模块 #

创建或修改项目根目录下的next.config.js，添加Webpack配置，在客户端构建时将fs等Node核心模块设为空解析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        path: false,
        os: false,
      };
    }
    return config;
  },
};

module.exports = nextConfig;

额外注意事项 #

• 确保你的Firebase Admin SDK初始化代码（即db文件）只在服务器端代码中被引用，不要在客户端组件中直接导入admin.firestore()，避免客户端打包时引入依赖Node模块的代码。
• getServerSideProps本身是在服务器端运行的，配置后不会影响其对Firebase Admin SDK的正常调用。

内容的提问来源于stack exchange，提问作者Ben Ahlander