如何通过i18n库动态获取Next.js应用中使用的语言列表？

客户端组件实现（支持Pages/App Router） #

在客户端组件中，直接使用useTranslation钩子获取已初始化的i18n实例，从中提取语言列表即可：

'use client';

import { useTranslation } from 'next-i18next';

export default function LanguageSelector() {
  const { i18n } = useTranslation();

  const switchLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="language-selector">
      {i18n.languages.map((lng) => (
        <button
          key={lng}
          onClick={() => switchLanguage(lng)}
          className={i18n.language === lng ? 'active' : ''}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

这里的i18n.languages就是你在next-i18next.config.js中配置的语言数组，无需手动导入配置文件。点击按钮时调用i18n.changeLanguage()即可切换语言。

Pages Router服务器端获取语言列表 #

如果是在Pages Router的页面中，可通过getServerSideProps里的req.i18n实例直接获取语言列表，再传递给页面组件：

export async function getServerSideProps({ req }) {
  // 从服务器端i18n实例中获取语言列表
  const languages = req.i18n.languages;
  return { props: { languages } };
}

export default function Home({ languages }) {
  return (
    <div>
      <h1>主页</h1>
      <div>
        {languages.map((lng) => (
          <button key={lng}>{lng}</button>
        ))}
      </div>
    </div>
  );
}

req.i18n是next-i18next自动注入到请求对象中的实例，直接读取其languages属性即可。

App Router服务器组件获取语言列表 #

在App Router的服务器组件中，可通过createInstance初始化i18n实例来获取语言列表：

import { createInstance } from 'i18next';
import i18nConfig from '../next-i18next.config.js';

export default async function ServerLanguageSelector() {
  const i18nInstance = createInstance();
  await i18nInstance.init(i18nConfig);
  
  return (
    <div>
      {i18nInstance.languages.map((lng) => (
        <span key={lng} className="language-option">{lng}</span>
      ))}
    </div>
  );
}

这里核心是通过i18n库的createInstance方法初始化实例后获取语言列表，符合从库本身获取的需求。

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