NextJS+TypeScript配置next-i18next报locale参数未传入错误如何修复

触发Error: Initial locale argument was not passed into serverSideTranslations的核心问题是getStaticProps内的参数解构错误，同时代码存在缺失必要导入的问题：

• 你从getStaticProps上下文里解构的是复数形式的locales，该值是项目配置的所有支持语言的数组（如['en', 'it']），但serverSideTranslations方法第一个参数要求传入单数形式的locale，即当前请求匹配到的单个语言字符串，传入数组会被判定为未传入合法的初始locale参数。
• 代码中未导入serverSideTranslations方法、_app.tsx中未导入AppProps类型，会触发TS校验错误甚至运行时异常。

按以下内容修改对应文件即可，配置文件无需调整：

修复 pages/index.tsx #

修正参数解构，补全缺失导入，增加类型兜底避免TS类型报错：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import type { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      // 兜底值和你配置的defaultLocale保持一致即可
      ...(await serverSideTranslations(locale ?? 'en', ['common']))
    }
  };
};

修复 pages/_app.tsx #

补全缺失的AppProps类型导入：

import type { AppProps } from 'next/app';
import { appWithTranslation } from "next-i18next";

const MyApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp);

配置文件校验 #

你现有的next-i18next.config.js和next.config.js配置符合无自定义场景的要求，只需确认两个文件放置在项目根目录即可，无需修改内容。

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