Next.js语言切换[编辑 | 编辑源代码]

Next.js语言切换是Next.js国际化（i18n）与本地化（l10n）功能的核心部分，允许开发者根据用户偏好或手动选择动态切换应用的语言。本指南将详细介绍如何在Next.js中实现多语言支持，包括路由策略、语言检测和切换机制。

介绍[编辑 | 编辑源代码]

Next.js从v10开始内置了国际化路由支持，通过配置next.config.js可快速实现多语言站点的路由结构。语言切换通常涉及以下组件：

语言配置（支持的语言列表）
路由策略（子路径或域名路由）
用户语言检测（浏览器设置或手动选择）
内容翻译管理系统（如JSON文件或i18n库）

基础配置[编辑 | 编辑源代码]

修改next.config.js[编辑 | 编辑源代码]

首先在项目配置中声明支持的语言和默认语言：

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'], // 支持的语言代码
    defaultLocale: 'en',         // 默认语言
    localeDetection: true,       // 是否自动检测浏览器语言
  },
}

路由策略类型[编辑 | 编辑源代码]

Next.js支持两种路由策略：

策略类型	示例URL	说明
子路径	`/fr/about`	语言代码作为路径前缀
域名	`https://fr.example.com`	不同域名对应不同语言

配置域名路由需额外设置：

i18n: {
  domains: [
    {
      domain: 'example.com',
      defaultLocale: 'en',
    },
    {
      domain: 'fr.example.com',
      defaultLocale: 'fr',
    },
  ]
}

实现语言切换[编辑 | 编辑源代码]

使用useRouter钩子[编辑 | 编辑源代码]

通过Next.js提供的路由钩子实现前端切换：

import { useRouter } from 'next/router';

function LanguageSwitcher() {
  const router = useRouter();

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

  return (
    <select 
      value={router.locale}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {router.locales.map((locale) => (
        <option key={locale} value={locale}>
          {locale.toUpperCase()}
        </option>
      ))}
    </select>
  );
}

服务端语言检测[编辑 | 编辑源代码]

对于SSR页面，可在getServerSideProps中处理语言逻辑：

export async function getServerSideProps({ locale }) {
  const messages = await import(`../locales/${locale}.json`);
  return { props: { messages } };
}

内容本地化[编辑 | 编辑源代码]

推荐的文件结构：

public/
  locales/
    en.json
    fr.json
    de.json

示例翻译文件：

// locales/en.json
{
  "title": "Welcome",
  "description": "Learn about Next.js i18n"
}

// locales/fr.json
{
  "title": "Bienvenue",
  "description": "Apprenez Next.js i18n"
}

高级模式[编辑 | 编辑源代码]

动态导入翻译[编辑 | 编辑源代码]

结合next/dynamic实现按需加载语言包：

const dynamicTranslations = dynamic(
  () => import(`../locales/${locale}.json`),
  { ssr: false }
);

语言持久化[编辑 | 编辑源代码]

使用Cookie存储用户选择：

import Cookies from 'js-cookie';

const changeLanguage = (locale) => {
  Cookies.set('NEXT_LOCALE', locale, { expires: 365 });
  router.push(router.pathname, router.asPath, { locale });
};