Next.js13+Next-i18next部署AWS Amplify后/dashboard页面翻译失效求助

本地运行（包括生产模式执行yarn start）时翻译功能正常，但部署到AWS Amplify后，特定的/dashboard页面翻译完全失效，控制台无任何错误信息。UserHome、Base组件及其内部组件的翻译均失效，但其他页面翻译工作正常。

Dashboard页面代码 #

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import { UserHome } from '~/templates'

export default function Dashboard() {
  return <UserHome />
}

export async function getServerSideProps({ locale }: { locale: string }) {
  const res = await serverSideTranslations(locale, ['common'])
  return {
    props: {
      ...res
    }
  }
}

UserHome模板代码 #

import { useTranslation } from 'next-i18next'
import Image from 'next/image'

import { PageHeader, TableCampaign } from '~/components'
import { tableData } from '~/components/TableCampaign/mock'

import Base from '../Base'
import styles from './user-home.module.css'

const UserHome = () => {
  const { t } = useTranslation('common')
  return (
    <Base>
      <PageHeader image="/img/computer.svg" title={t('tableCampaign.title')}>
        <div className={styles.header__legends}>
          <div className={styles.header__infos}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__success}`}
              ></div>
              <p className={styles.header__state}>
                {t('tableCampaign.active')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/eye.svg"
                alt="Eye icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>{t('tableCampaign.view')}</p>
            </div>
          </div>

          <div className={`${styles.header__infos} mx-6`}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__warning}`}
              ></div>
              <p className={styles.header__state}>
                {t('tableCampaign.pending')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/edit.svg"
                alt="Pen icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>{t('tableCampaign.edit')}</p>
            </div>
          </div>

          <div className={styles.header__infos}>
            <div className={styles.header__legend}>
              <div
                className={`${styles.header__circle} ${styles.header__circle__danger}`}
              ></div>

              <p className={styles.header__state}>
                {t('tableCampaign.finished')}
              </p>
            </div>
            <div className={`${styles.header__legend} mt-2`}>
              <Image
                src="/icon/download.svg"
                alt="Download icon"
                className="mr-2"
                width={24}
                height={24}
              />
              <p className={styles.header__state}>
                {t('tableCampaign.download')}
              </p>
            </div>
          </div>
        </div>
      </PageHeader>
      <TableCampaign tableList={tableData} />
    </Base>
  )
}

export default UserHome

• 检查AWS Amplify构建配置：确认Amplify构建命令是否正确处理翻译文件。默认情况下Amplify可能不会自动复制public/locales目录到输出目录，需要在amplify.yml中添加复制步骤：

  build:
    commands:
      - yarn build
      - cp -r public/locales .next/public/locales
  

• 验证locale参数传递：在getServerSideProps中添加日志输出，确认部署环境下locale是否正确获取（Amplify控制台可查看构建日志）：

  export async function getServerSideProps({ locale }: { locale: string }) {
    console.log('Dashboard locale:', locale)
    const res = await serverSideTranslations(locale, ['common'])
    return {
      props: {
        ...res
      }
    }
  }
  

• 核对翻译文件路径与命名：确认public/locales/[lang]/common.json文件存在，且键名（如tableCampaign.title）完全匹配。注意AWS Linux环境区分大小写，确保文件名和路径大小写一致。
• 检查next-i18next配置：确认next-i18next.config.js中的localePath配置在生产环境下能正确加载翻译文件：

  module.exports = {
    i18n: {
      locales: ['en', 'zh'],
      defaultLocale: 'en',
    },
    localePath: typeof window === 'undefined' ? require('path').resolve('./public/locales') : '/locales',
  }
  

• 验证Base组件翻译上下文：如果Base组件内部使用useTranslation，确保它显式指定namespace（如const { t } = useTranslation('common')），正确继承页面的翻译资源。
• 强制刷新Amplify缓存：在Amplify控制台手动触发重新构建，勾选"清除构建缓存"选项，避免旧构建产物导致的问题。

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