Next.js集成i18next页面切换缓慢及依赖警告问题求助

一、解决webpack Critical Dependency警告 #

你遇到的Critical dependency: the request of a dependency is an expression警告，源于serverSideTranslations内部的动态导入逻辑，webpack无法静态分析这类依赖导致告警。可通过修改next.config.js的webpack配置抑制该警告：

const {i18n} = require('./next-i18next.config')
const withVideos = require('next-videos')
module.exports = withVideos({
  reactStrictMode : true,
  i18n,
  
  webpack: (config, { isServer }) => {
    config.resolve.fallback = { fs: false };
    
    // 屏蔽serverSideTranslations的动态依赖告警
    if (isServer) {
      config.module.noParse = /next-i18next\/dist\/commonjs\/serverSideTranslations\.js/;
    }

    return config;
  },
})

二、解决页面切换耗时过长/刷新问题 #

页面切换卡顿或刷新，核心问题多为locale切换方式错误或getStaticProps配置不当，按以下步骤修复：

1. 修正serverSideTranslations的使用方式 #

你在getStaticProps中传入了整个i18nConfig，但该方法的第二个参数应为需要加载的翻译命名空间数组（比如你用到的contact），而非完整配置对象，错误传参可能导致不必要的资源加载：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
// 确保正确导入配置文件
import i18nConfig from '../next-i18next.config';

export async function getStaticProps({ locale }) {
  return {
    props: {
      // 只加载当前页面用到的命名空间，减少资源体积
      ...(await serverSideTranslations(locale, ['common', 'contact'])),
    },
  };
}

2. 用next/link实现无刷新locale切换 #

如果使用普通<a>标签切换locale，会触发页面强制刷新，必须配合next/link和useRouter实现无刷新切换：

import { useRouter } from 'next/router';

export default function LocaleSwitcher() {
  const router = useRouter();
  const { pathname, query, asPath } = router;

  const switchLocale = (targetLocale) => {
    router.push({ pathname, query }, asPath, { locale: targetLocale });
  };

  return (
    <div>
      <button onClick={() => switchLocale('fa')}>فارسی</button>
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('ar')}>العربية</button>
    </div>
  );
}

3. 确认翻译文件目录结构合规 #

检查public/locales的目录结构是否符合要求，需保证每个locale对应独立的翻译文件：

public
└── locales
    ├── fa
    │   ├── common.json
    │   └── contact.json
    ├── en
    │   ├── common.json
    │   └── contact.json
    └── ar
        ├── common.json
        └── contact.json

文件缺失或路径错误会导致翻译加载失败，拖慢页面切换速度。

4. 启用按需加载优化 #

在next-i18next.config.js中添加partialBundledLanguages: true，仅加载当前locale所需的翻译文件，减少初始加载体积：

const path = require('path')
module.exports = {
    i18n:{
      locales: ['fa','en','ar'],
      defaultLocale: 'fa',
      localeDetection: false,
    },
    localePath: path.resolve('./public/locales'),
    partialBundledLanguages: true // 开启按需加载
  }

三、验证修改效果 #

1. 重启开发服务器，确认控制台不再出现Critical Dependency警告
2. 测试locale切换功能，检查页面是否无刷新、切换速度是否提升

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