next-i18next部署在站点子目录后无法加载翻译文件该如何配置

• basePath配置逻辑完全颠倒：你当前配置是开发环境设置basePath为/app，生产环境为空，但实际需求是生产环境部署在子目录example.com/app，必须生产环境才设置basePath为/app
• 生产环境localePath配置错误：你写的path.resolve('/app/public/locales/')是服务器文件系统的根路径寻址，除非你把项目代码直接部署在服务器根目录的/app文件夹下，否则根本找不到对应文件
• assetPrefix未区分环境：全局设置assetPrefix: '/app/'会导致开发环境静态资源路径也加上前缀，引发开发环境资源加载错误

1. 修正next.config.js配置 #

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

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
    i18n,
    // 生产环境才开启子目录前缀
    basePath: isProd ? '/app' : '',
    // 生产环境才加静态资源前缀
    assetPrefix: isProd ? '/app/' : '',
    // *注意：如果使用next export导出纯静态文件，必须配置这行*
    trailingSlash: true,
    env: {
        REACT_APP_URL: process.env.REACT_APP_URL,
        REACT_APP_AUTH_LOGIN: process.env.REACT_APP_AUTH_LOGIN,
        REACT_APP_AUTH_PASS: process.env.REACT_APP_AUTH_PASS,
    },
};

2. 修正next-i18next.config.js配置 #

直接统一使用相对路径即可，next-i18next会自动适配basePath处理客户端翻译文件的请求路径：

// next-i18next.config.js
const path = require('path'); //eslint-disable-line

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: [
            'en',
            'id',
            'bs',
        ],
        // 不需要自动语言检测可关闭，避免子目录下跳转错误
        localeDetection: false,
    },
    // 去掉环境判断，统一用项目内相对路径
    localePath: path.resolve('./public/locales/'),
    defaultNS: 'def',
    ns: ['def', 'overview', 'hint', 'bar_team', 'training', 'trans'],
    debug: process.env.NODE_ENV !== 'production',
    keySeparator: '/',
    interpolation: {
        escapeValue: false,
    },
    react: {
        useSuspense: false,
        wait: true,
    },
};

3. 额外检查项 #

• 确保public目录下的翻译文件结构正确，格式为public/locales/[语言]/[命名空间].json，比如public/locales/en/def.json
• 页面getStaticProps中调用serverSideTranslations无需额外传路径参数，修正配置后会自动适配
• 若使用Nginx等反向代理部署，确保代理配置正确将example.com/app的请求全部转发到你的Next.js服务端口，不要丢失/app前缀

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