编辑“︁Next.js next-i18next”︁（章节）

== 高级功能 ==

=== 命名空间 ===

next-i18next 支持命名空间来组织翻译内容。创建额外的命名空间文件：

<pre>
// public/locales/en/home.json
{
  "title": "Home Page"
}
</pre>

然后在组件中使用：

<syntaxhighlight lang="javascript">
const { t } = useTranslation(['common', 'home']);
// 使用
t('home:title');
</syntaxhighlight>

=== 动态语言切换 ===

实现语言切换功能：

<syntaxhighlight lang="javascript">
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

function LanguageSwitcher() {
  const router = useRouter();
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
    router.push(router.pathname, router.asPath, { locale: lang });
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
    </div>
  );
}
</syntaxhighlight>

=== 服务器端渲染 ===

对于需要 SSR 的页面，使用 <code>serverSideTranslations</code>：

<syntaxhighlight lang="javascript">
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'home'])),
    },
  };
}
</syntaxhighlight>