接手的旧Next.js项目启动报错，已升级Node.js至18.17.1

错误分析 #

你遇到两个关联错误：

1. 核心触发错误：Error: Initial locale argument was not passed into serverSideTranslations —— next-i18next的serverSideTranslations函数必须接收locale作为第一个参数，否则会抛出此错误，进而导致后续GraphQL查询流程中断。
2. 衍生解构错误：TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined —— 由于前面的locale错误中断了执行，GraphQL查询返回了undefined，导致解构失败。

分步解决 #

1. 修复serverSideTranslations的locale参数传递 #

打开pages/index.js的getStaticProps函数，确保：

• 函数接收locale参数（Next.js会自动传入）
• 调用serverSideTranslations时第一个参数传入locale

示例修正代码：

export async function getStaticProps({ locale }) {
  // 正确传入locale到serverSideTranslations
  const i18nProps = await serverSideTranslations(locale, ['common']); // 第二个参数为项目使用的i18n命名空间，按需修改

  const _locale = getStrapiLocale(locale);
  
  // 给GraphQL查询添加错误处理，避免解构失败
  let macroProductsData = [];
  try {
    const response = await client.query({
      query: GET_ALL_MACRO_PRODUCTS,
      variables: { locale: _locale },
    });
    macroProductsData = response.data || [];
  } catch (err) {
    console.error('GraphQL查询失败:', err);
  }

  return {
    props: {
      ...i18nProps,
      macroProductsData,
    },
    revalidate: 60, // 按需设置静态页面重验证时间
  };
}

2. 排查Node.js升级后的依赖兼容性 #

升级Node.js 14→18后，部分旧依赖可能存在兼容性问题：

• 删除node_modules和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）
• 检查package.json中next-i18next、graphql、apollo-client等依赖的版本，确保它们适配Node.js 18和当前项目的Next.js版本

3. 验证next-i18next配置 #

检查项目根目录的next-i18next.config.js，确保locales配置和项目实际使用的语言一致，示例配置：

module.exports = {
  i18n: {
    defaultLocale: 'zh',
    locales: ['zh', 'en'], // 按需添加项目支持的语言
  },
};

验证修复 #

完成上述步骤后，重新启动项目：

npm run dev

先确认serverSideTranslations的错误消失，再检查GraphQL查询是否正常返回数据。

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