AWS Amplify上Next.js(page目录)动态页面i18n翻译失效求助

可能的原因及修复步骤 #

1. 确保翻译文件被正确打包上传 #

AWS Amplify默认构建配置可能未包含public/locales下的翻译JSON文件，导致部署后无法读取翻译内容。需修改构建配置：

• 在项目根目录创建amplify.yml文件（若已存在则编辑），添加翻译文件的上传规则：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
      - public/locales/**/* # 强制包含翻译文件
  cache:
    paths:
      - node_modules/**/*
      - public/locales/**/* # 缓存翻译文件，加速后续构建

• 也可直接在AWS Amplify控制台的「构建设置」中，手动将public/locales/**/*添加到 artifacts 的文件列表内。

2. 校验next-i18next的路径配置 #

确认next-i18next.config.js中的localePath配置兼容服务端与客户端：

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'zh'], // 替换为你的实际语言列表
  },
  localePath: typeof window === 'undefined' 
    ? require('path').resolve('./public/locales') 
    : '/locales',
}

服务端运行时需使用绝对路径读取翻译文件，客户端则用相对路径，该配置可覆盖两端场景。

3. 完善getServerSideProps的命名空间传递 #

若你的翻译内容放在自定义命名空间（如blogs）下，需在serverSideTranslations中明确传入命名空间参数，否则会因找不到对应翻译显示键名：

export async function getServerSideProps(context) {
  const { locale, params: { id } } = context;
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'blogs'])), // 传入你的命名空间
      id, // 传递动态参数给页面组件
    },
  };
}

4. 清理Amplify缓存并重新构建 #

Amplify的构建缓存可能残留旧文件，导致翻译未更新：在Amplify控制台的构建页面，点击「重新部署此版本」并勾选「清除缓存」，重新执行构建部署。

5. 排查环境变量冲突 #

检查Amplify的环境变量列表，确保没有自定义变量（如NEXT_PUBLIC_I18N_*）覆盖next-i18next的默认配置逻辑。

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