Next.js（Vercel）中导入google-cloud/speech模块失败求助

问题根源 #

你在next.config.js里将google-cloud/speech配置为resolve.fallback: { 'google-cloud/speech': false }，这会让Webpack直接忽略该模块的加载，导致导入后speech对象为空，自然打印无输出。

解决方案 #

1. 修正Webpack配置

Next.js的API路由运行在Node.js服务端环境，不需要对@google-cloud/speech做客户端兼容处理，因此要移除fallback中对该模块的禁用配置：

// next.config.js
module.exports = withBundleAnalyzer({  
  webpack5: true,
  webpack: (config) => {
    // 移除 'google-cloud/speech': false 这一行
    // 若有其他fallback需求，仅保留必要模块（如fs、path等，按需添加）
    config.resolve.fallback = {
      // 示例：如果需要其他fallback模块，在这里添加
      // fs: false,
      // path: require.resolve('path-browserify'),
    };
    return config;
  },
})

2. 正确导入模块

API路由属于服务端代码，可直接使用ES模块或CommonJS导入，推荐用ES模块风格更贴合Next.js生态：

// API路由文件
import { getAuth } from "firebase/auth";
// 使用ES模块导入@google-cloud/speech
import speech from '@google-cloud/speech';

export async function POST(req: NextRequest) {
  console.log(speech, 'lx');
  const body = await req.json();
  // 后续业务逻辑
}

3. 必要前置检查

• 确保已安装依赖包：

npm install @google-cloud/speech
# 或
yarn add @google-cloud/speech

• Vercel部署时，需配置Google Cloud服务账号密钥：将密钥内容存入Vercel项目的环境变量（如GOOGLE_APPLICATION_CREDENTIALS），避免将密钥文件提交至代码仓库。

内容的提问来源于stack exchange，提问作者Kyle Shin