解决next-i18next部署Vercel时‘未传入初始locale’报错问题

错误原因分析 #

1. useTranslation 参数传递错误
   你将locale作为第一个参数传给useTranslation，但该函数的第一个参数应为翻译命名空间（如"common"），而非locale值。next-i18next会通过serverSideTranslations注入的props自动识别当前locale，无需手动传递。

2. 配置文件未正确整合到Next.js
   你的配置文件命名为nexti18.config，不符合next-i18next的标准配置要求，可能导致Next.js无法正确读取国际化配置。

3. locale 参数未做兜底处理
   Vercel构建环境中偶尔会出现locale参数未被正确传递的情况，缺少默认值会导致serverSideTranslations接收undefined参数触发报错。

修正方案 #

1. 修改首页index.js代码 #

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation, Trans } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

import { Services } from "../components/Services";
import { Contact } from "../components/contact/Contact";
import { AboutUs } from "../components/AboutUs";
import { Team } from "../components/Team";
import Properties from "../components/property";

const myLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};
const myLoader2 = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};

export default function Home() {
  const router = useRouter();
  const { t, i18n } = useTranslation("common"); // 仅传递命名空间，无需手动传locale
  return (
    <>
      <div>
        <Services />
        <Properties />
        <AboutUs
          aboutUsText={t("aboutUsText1")}
          aboutUsText1={t("aboutUsText2")}
          aboutUsText2={t("aboutUsText3")}
          aboutUsText3={t("aboutUsText4")}
        />
        <Team teamText1={t("teamText1")} />
        <Contact />
      </div>
    </>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    // 给locale加默认值，避免构建时传入undefined
    ...(await serverSideTranslations(locale || "es-ES", ["common"])),
  },
});

2. 修正配置文件结构 #

• 将原nexti18.config重命名为next-i18next.config.js
• 在项目根目录创建/修改next.config.js，引入国际化配置：

// next.config.js
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  // 其他Next.js配置项（如images、reactStrictMode等）
};

3. 验证翻译文件路径 #

确保翻译文件存放在正确路径：public/locales/{locale}/{namespace}.json，例如：

• public/locales/es-ES/common.json
• public/locales/en-US/common.json

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