掌握Next.js国际化技巧让你的网站应用走向全球

威震华夏关云长

在全球化的数字时代，网站和应用程序的国际化（Internationalization，通常缩写为i18n）已经成为一项必备功能。国际化不仅能够帮助你的产品触及更广泛的受众，还能提供更好的用户体验，增强品牌在全球市场的影响力。Next.js作为流行的React框架，提供了强大的国际化支持，使开发者能够轻松构建多语言网站。

本文将深入探讨Next.js的国际化技巧，从基础设置到高级优化，帮助你构建真正全球化的网站应用。

Next.js国际化基础

什么是国际化？

国际化是指设计和开发能够适应不同语言和地区而不需要工程更改的应用程序的过程。与国际化相关的是本地化（Localization，简称L10n），它是将国际化应用程序适应特定语言和地区的过程。

Next.js的国际化特性

Next.js从版本10开始引入了内置的国际化支持，并在后续版本中不断改进。主要特性包括：

• 自动区域设置检测
• 基于路径的国际化路由
• 本地化内容管理
• SEO优化的多语言支持

核心概念

在深入Next.js国际化之前，我们需要了解几个核心概念：

1. 区域设置（Locale）：表示语言和地区的组合，如en-US（美国英语）、zh-CN（简体中文）等。
2. 默认区域设置：当用户的区域设置无法确定时使用的后备区域设置。
3. 区域设置检测：Next.js如何确定用户的偏好区域设置。
4. 域路由：使用不同的域名提供不同语言的内容。

设置Next.js国际化项目

初始化Next.js项目

首先，让我们创建一个新的Next.js项目：

2. npx create-next-app my-i18n-app
3. cd my-i18n-app

复制代码

配置next.config.js

Next.js的国际化配置在next.config.js文件中进行。我们需要添加i18n配置对象：

2. // next.config.js
3. module.exports = {
4.   i18n: {
5.     // 这些是您支持的所有区域设置
6.     locales: ['en', 'zh', 'es', 'fr'],
7.     // 这是默认区域设置，当访问路径中没有区域设置时使用
8.     defaultLocale: 'en',
9.     // 这是区域设置检测策略
10.     localeDetection: true,
11.     // 可选：域映射
12.     domains: [
13.       {
14.         domain: 'example.com',
15.         defaultLocale: 'en',
16.       },
17.       {
18.         domain: 'example.cn',
19.         defaultLocale: 'zh',
20.       },
21.     ],
22.   },
23. }

复制代码

在这个配置中：

• locales数组列出了我们支持的所有语言。
• defaultLocale指定了默认语言。
• localeDetection控制是否自动检测用户的语言偏好。
• domains（可选）允许你为不同语言使用不同的域名。

安装必要的依赖

为了更好地处理国际化，我们通常需要安装一些额外的库：

2. npm install next-i18next react-i18next i18next

复制代码

next-i18next是一个流行的Next.js国际化解决方案，它简化了翻译文件的管理和使用。

创建翻译文件

在项目根目录下创建public/locales文件夹，并为每种语言创建子文件夹：

2. public/
3.   locales/
4.     en/
5.       common.json
6.       home.json
7.     zh/
8.       common.json
9.       home.json
10.     es/
11.       common.json
12.       home.json
13.     fr/
14.       common.json
15.       home.json

复制代码

每个JSON文件包含对应语言的翻译内容。例如：

2. // public/locales/en/common.json
3. {
4.   "welcome": "Welcome",
5.   "login": "Login",
6.   "logout": "Logout",
7.   "about": "About"
8. }
10. // public/locales/zh/common.json
11. {
12.   "welcome": "欢迎",
13.   "login": "登录",
14.   "logout": "退出",
15.   "about": "关于"
16. }

复制代码

初始化i18n

在项目根目录创建i18n.js文件：

2. // i18n.js
3. const path = require('path');
5. module.exports = {
6.   i18n: {
7.     defaultLocale: 'en',
8.     locales: ['en', 'zh', 'es', 'fr'],
9.     localePath: path.resolve('./public/locales'),
10.   },
11.   reloadOnPrerender: process.env.NODE_ENV === 'development',
12. };

复制代码

然后，创建next-i18next.config.js文件：

2. // next-i18next.config.js
3. module.exports = {
4.   i18n: {
5.     defaultLocale: 'en',
6.     locales: ['en', 'zh', 'es', 'fr'],
7.   },
8. };

复制代码

修改_app.js

为了在整个应用中使用国际化，我们需要修改pages/_app.js：

2. // pages/_app.js
3. import { appWithTranslation } from 'next-i18next';
5. function MyApp({ Component, pageProps }) {
6.   return <Component {...pageProps} />;
7. }
9. export default appWithTranslation(MyApp);

复制代码

路由国际化

Next.js提供了两种主要的国际化路由策略：基于子路径的路由和基于域的路由。

基于子路径的路由

这是最常见的路由策略，其中语言代码作为URL路径的一部分。例如：

2. https://example.com/en/about
3. https://example.com/zh/about
4. https://example.com/es/about

复制代码

当使用这种策略时，Next.js会自动处理路由，无需额外的配置。例如，创建一个关于页面：

2. // pages/about.js
3. import { useTranslation } from 'next-i18next';
4. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
6. export default function AboutPage() {
7.   const { t } = useTranslation('common');
9.   return (
10.     <div>
11.       <h1>{t('about')}</h1>
12.       <p>{t('about_description')}</p>
13.     </div>
14.   );
15. }
17. export async function getStaticProps({ locale }) {
18.   return {
19.     props: {
20.       ...(await serverSideTranslations(locale, ['common'])),
21.     },
22.   };
23. }

复制代码

基于域的路由

基于域的路由使用不同的域名来服务不同语言的内容。例如：

2. https://example.com (英语)
3. https://example.cn (中文)
4. https://example.es (西班牙语)

复制代码

这种策略需要在next.config.js中配置域名映射，如前面所示。

动态路由的国际化

对于动态路由，如pages/posts/[id].js，国际化处理如下：

2. // pages/posts/[id].js
3. import { useRouter } from 'next/router';
4. import { useTranslation } from 'next-i18next';
5. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
7. export default function Post({ post }) {
8.   const router = useRouter();
9.   const { t } = useTranslation('common');
11.   return (
12.     <div>
13.       <h1>{post.title}</h1>
14.       <p>{post.content}</p>
15.     </div>
16.   );
17. }
19. export async function getStaticPaths({ locales }) {
20.   const posts = await getPosts(); // 假设这是一个获取所有文章的函数
21.   const paths = [];
23.   posts.forEach((post) => {
24.     locales.forEach((locale) => {
25.       paths.push({
26.         params: { id: post.id },
27.         locale,
28.       });
29.     });
30.   });
32.   return {
33.     paths,
34.     fallback: false,
35.   };
36. }
38. export async function getStaticProps({ params, locale }) {
39.   const post = await getPost(params.id); // 假设这是一个获取特定文章的函数
41.   return {
42.     props: {
43.       post,
44.       ...(await serverSideTranslations(locale, ['common'])),
45.     },
46.   };
47. }

复制代码

语言切换器

创建一个语言切换器组件，允许用户在不同语言之间切换：

2. // components/LanguageSwitcher.js
3. import { useRouter } from 'next/router';
4. import Link from 'next/link';
6. const LanguageSwitcher = () => {
7.   const router = useRouter();
8.   const { locales, locale, asPath } = router;
10.   return (
11.     <div>
12.       {locales.map((lang) => (
13.         <Link href={asPath} locale={lang} key={lang}>
14.           <a style={{ margin: '0 5px', fontWeight: locale === lang ? 'bold' : 'normal' }}>
15.             {lang}
16.           </a>
17.         </Link>
18.       ))}
19.     </div>
20.   );
21. };
23. export default LanguageSwitcher;

复制代码

内容翻译

使用useTranslation钩子

在组件中使用useTranslation钩子来访问翻译内容：

2. import { useTranslation } from 'next-i18next';
4. function MyComponent() {
5.   const { t } = useTranslation('common');
7.   return (
8.     <div>
9.       <h1>{t('welcome')}</h1>
10.       <p>{t('description')}</p>
11.     </div>
12.   );
13. }

复制代码

带参数的翻译

有时我们需要在翻译文本中插入参数：

2. // public/locales/en/common.json
3. {
4.   "welcome_user": "Welcome, {{name}}!",
5.   "items_count": "You have {{count}} items"
6. }

复制代码

使用方式：

2. const { t } = useTranslation('common');
4. // 简单参数
5. const welcomeMessage = t('welcome_user', { name: 'John' });
7. // 复数形式
8. const itemsMessage = t('items_count', { count: 5 });

复制代码

嵌套翻译

翻译文件可以包含嵌套结构：

2. // public/locales/en/common.json
3. {
4.   "header": {
5.     "title": "My Website",
6.     "nav": {
7.       "home": "Home",
8.       "about": "About",
9.       "contact": "Contact"
10.     }
11.   }
12. }

复制代码

使用方式：

2. const { t } = useTranslation('common');
4. const homeLink = t('header.nav.home');
5. const aboutLink = t('header.nav.about');

复制代码

HTML内容的翻译

如果需要翻译包含HTML的内容，可以使用Trans组件：

2. import { Trans } from 'next-i18next';
4. function MyComponent() {
5.   return (
6.     <Trans i18nKey="welcome_message">
7.       Welcome to <strong>My Website</strong>! Please <a href="/login">log in</a> to continue.
8.     </Trans>
9.   );
10. }

复制代码

对应的翻译文件：

2. // public/locales/en/common.json
3. {
4.   "welcome_message": "Welcome to <1>My Website</1>! Please <4>log in</4> to continue."
5. }

复制代码

翻译文件的命名空间

使用命名空间可以更好地组织翻译内容：

2. // 使用特定命名空间
3. const { t } = useTranslation('home');
5. // 使用多个命名空间
6. const { t } = useTranslation(['common', 'home']);

复制代码

在getStaticProps或getServerSideProps中加载命名空间：

2. export async function getStaticProps({ locale }) {
3.   return {
4.     props: {
5.       ...(await serverSideTranslations(locale, ['common', 'home'])),
6.     },
7.   };
8. }

复制代码

日期、数字和货币的本地化

日期本地化

使用JavaScript的Intl API来格式化日期：

2. import { useRouter } from 'next/router';
4. function DateComponent({ date }) {
5.   const { locale } = useRouter();
6.   
7.   const formattedDate = new Intl.DateTimeFormat(locale, {
8.     year: 'numeric',
9.     month: 'long',
10.     day: 'numeric',
11.   }).format(new Date(date));
13.   return <div>{formattedDate}</div>;
14. }

复制代码

或者使用date-fns库：

2. npm install date-fns

复制代码

2. import { format } from 'date-fns';
3. import { zhCN, enUS, es, fr } from 'date-fns/locale';
5. const locales = { en: enUS, zh: zhCN, es: es, fr: fr };
7. function DateComponent({ date }) {
8.   const { locale } = useRouter();
9.   
10.   const formattedDate = format(new Date(date), 'PPP', {
11.     locale: locales[locale],
12.   });
14.   return <div>{formattedDate}</div>;
15. }

复制代码

数字本地化

使用Intl.NumberFormat来格式化数字：

2. import { useRouter } from 'next/router';
4. function NumberComponent({ value }) {
5.   const { locale } = useRouter();
6.   
7.   const formattedNumber = new Intl.NumberFormat(locale).format(value);
9.   return <div>{formattedNumber}</div>;
10. }

复制代码

货币本地化

使用Intl.NumberFormat来格式化货币：

2. import { useRouter } from 'next/router';
4. function PriceComponent({ value, currency }) {
5.   const { locale } = useRouter();
6.   
7.   const formattedPrice = new Intl.NumberFormat(locale, {
8.     style: 'currency',
9.     currency: currency,
10.   }).format(value);
12.   return <div>{formattedPrice}</div>;
13. }
15. // 使用方式
16. <PriceComponent value={1234.56} currency="USD" /> // $1,234.56 (en-US)
17. <PriceComponent value={1234.56} currency="EUR" /> // 1 234,56 € (fr-FR)

复制代码

SEO优化

hreflang标签

hreflang标签告诉搜索引擎不同语言版本之间的关系。在Next.js中，可以通过自定义Document组件添加这些标签：

2. // pages/_document.js
3. import Document, { Html, Head, Main, NextScript } from 'next/document';
4. import { i18n } from '../next-i18next.config';
6. class MyDocument extends Document {
7.   render() {
8.     const currentLocale = this.props.__NEXT_DATA__.query.locale || i18n.defaultLocale;
9.    
10.     return (
11.       <Html lang={currentLocale}>
12.         <Head>
13.           {i18n.locales.map((locale) => (
14.             <link
15.               key={locale}
16.               rel="alternate"
17.               hrefLang={locale}
18.               href={`https://example.com/${locale}${this.props.__NEXT_DATA__.asPath}`}
19.             />
20.           ))}
21.           <link
22.             rel="alternate"
23.             hrefLang="x-default"
24.             href={`https://example.com/${i18n.defaultLocale}${this.props.__NEXT_DATA__.asPath}`}
25.           />
26.         </Head>
27.         <body>
28.           <Main />
29.           <NextScript />
30.         </body>
31.       </Html>
32.     );
33.   }
34. }
36. export default MyDocument;

复制代码

元标签的本地化

确保每个页面的元标签（如标题、描述）也是本地化的：

2. // pages/about.js
3. import { useTranslation } from 'next-i18next';
4. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
5. import Head from 'next/head';
7. export default function AboutPage() {
8.   const { t } = useTranslation('common');
10.   return (
11.     <>
12.       <Head>
13.         <title>{t('about_title')}</title>
14.         <meta name="description" content={t('about_description')} />
15.       </Head>
16.       <div>
17.         <h1>{t('about')}</h1>
18.         <p>{t('about_content')}</p>
19.       </div>
20.     </>
21.   );
22. }
24. export async function getStaticProps({ locale }) {
25.   return {
26.     props: {
27.       ...(await serverSideTranslations(locale, ['common'])),
28.     },
29.   };
30. }

复制代码

XML站点地图

为多语言网站创建XML站点地图，可以使用next-sitemap包：

2. npm install next-sitemap

复制代码

创建next-sitemap.config.js文件：

2. // next-sitemap.config.js
3. module.exports = {
4.   siteUrl: 'https://example.com',
5.   generateRobotsTxt: true,
6.   exclude: ['/server-sitemap.xml'],
7.   robotsTxtOptions: {
8.     additionalSitemaps: [
9.       'https://example.com/server-sitemap.xml',
10.     ],
11.   },
12. };

复制代码

然后在package.json中添加脚本：

2. {
3.   "scripts": {
4.     "postbuild": "next-sitemap"
5.   }
6. }

复制代码

性能优化

按需加载翻译文件

为了避免一次性加载所有翻译文件，可以使用next-i18next的按需加载功能：

2. // next-i18next.config.js
3. module.exports = {
4.   i18n: {
5.     defaultLocale: 'en',
6.     locales: ['en', 'zh', 'es', 'fr'],
7.   },
8.   // 启用按需加载
9.   use: [{
10.     loader: 'i18next-resources-to-backend',
11.     options: {
12.       loadPath: (locale, namespace) =>
13.         `https://cdn.example.com/locales/${locale}/${namespace}.json`,
14.     },
15.   }],
16. };

复制代码

预取翻译文件

为了提高用户体验，可以预取用户可能切换到的语言的翻译文件：

2. // components/LanguageSwitcher.js
3. import { useRouter } from 'next/router';
4. import Link from 'next/link';
5. import { useTranslation } from 'next-i18next';
7. const LanguageSwitcher = () => {
8.   const router = useRouter();
9.   const { locales, locale, asPath } = router;
10.   const { i18n } = useTranslation();
12.   const handlePrefetch = (lang) => {
13.     i18n.loadLanguages(lang);
14.   };
16.   return (
17.     <div>
18.       {locales.map((lang) => (
19.         <Link
20.           href={asPath}
21.           locale={lang}
22.           key={lang}
23.           onMouseEnter={() => handlePrefetch(lang)}
24.         >
25.           <a style={{ margin: '0 5px', fontWeight: locale === lang ? 'bold' : 'normal' }}>
26.             {lang}
27.           </a>
28.         </Link>
29.       ))}
30.     </div>
31.   );
32. };
34. export default LanguageSwitcher;

复制代码

使用CDN托管翻译文件

将翻译文件托管在CDN上可以减少服务器负载并提高加载速度：

2. // next-i18next.config.js
3. module.exports = {
4.   backend: {
5.     loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
6.   },
7. };

复制代码

缓存翻译文件

使用Service Worker缓存翻译文件，提高重复访问的速度：

2. // public/sw.js
3. const CACHE_NAME = 'my-i18n-cache-v1';
4. const urlsToCache = [
5.   '/locales/en/common.json',
6.   '/locales/zh/common.json',
7.   '/locales/es/common.json',
8.   '/locales/fr/common.json',
9. ];
11. self.addEventListener('install', (event) => {
12.   event.waitUntil(
13.     caches.open(CACHE_NAME)
14.       .then((cache) => cache.addAll(urlsToCache))
15.   );
16. });
18. self.addEventListener('fetch', (event) => {
19.   event.respondWith(
20.     caches.match(event.request)
21.       .then((response) => {
22.         if (response) {
23.           return response;
24.         }
25.         return fetch(event.request);
26.       })
27.   );
28. });

复制代码

然后在pages/_app.js中注册Service Worker：

2. // pages/_app.js
3. import { useEffect } from 'react';
5. function MyApp({ Component, pageProps }) {
6.   useEffect(() => {
7.     if ('serviceWorker' in navigator) {
8.       navigator.serviceWorker.register('/sw.js')
9.         .then((registration) => {
10.           console.log('Service Worker registered with scope:', registration.scope);
11.         })
12.         .catch((error) => {
13.           console.log('Service Worker registration failed:', error);
14.         });
15.     }
16.   }, []);
18.   return <Component {...pageProps} />;
19. }
21. export default MyApp;

复制代码

高级技巧

动态加载翻译

对于大型应用，可能需要动态加载翻译文件，而不是在构建时包含所有翻译：

2. // utils/i18n.js
3. import i18n from 'i18next';
4. import { initReactI18next } from 'react-i18next';
6. const resources = {
7.   en: {
8.     translation: () => import('../public/locales/en/common.json'),
9.   },
10.   zh: {
11.     translation: () => import('../public/locales/zh/common.json'),
12.   },
13.   es: {
14.     translation: () => import('../public/locales/es/common.json'),
15.   },
16.   fr: {
17.     translation: () => import('../public/locales/fr/common.json'),
18.   },
19. };
21. i18n
22.   .use(initReactI18next)
23.   .init({
24.     resources,
25.     lng: 'en',
26.     fallbackLng: 'en',
27.     interpolation: {
28.       escapeValue: false,
29.     },
30.   });
32. export default i18n;

复制代码

基于用户的地理位置自动选择语言

可以使用用户的地理位置信息来自动选择语言：

2. // utils/detectLocale.js
3. export async function detectLocale() {
4.   try {
5.     const response = await fetch('https://ipapi.co/json/');
6.     const data = await response.json();
7.    
8.     // 根据国家代码映射到语言
9.     const countryToLocale = {
10.       'CN': 'zh',
11.       'US': 'en',
12.       'ES': 'es',
13.       'FR': 'fr',
14.       // 更多映射...
15.     };
16.    
17.     return countryToLocale[data.country] || 'en';
18.   } catch (error) {
19.     console.error('Error detecting locale:', error);
20.     return 'en';
21.   }
22. }

复制代码

然后在getServerSideProps中使用：

2. // pages/_app.js
3. import { detectLocale } from '../utils/detectLocale';
5. function MyApp({ Component, pageProps }) {
6.   return <Component {...pageProps} />;
7. }
9. MyApp.getInitialProps = async ({ ctx }) => {
10.   const locale = await detectLocale();
11.   
12.   return {
13.     pageProps: {
14.       initialLocale: locale,
15.     },
16.   };
17. };
19. export default MyApp;

复制代码

使用翻译管理系统

对于大型项目，手动管理翻译文件可能变得困难。可以考虑使用翻译管理系统（TMS），如Transifex、Crowdin或Phrase：

2. // utils/translationApi.js
3. const API_KEY = 'your-api-key';
4. const PROJECT_ID = 'your-project-id';
6. export async function fetchTranslations(locale) {
7.   try {
8.     const response = await fetch(
9.       `https://api.transifex.com/projects/${PROJECT_ID}/resource/${locale}/`,
10.       {
11.         headers: {
12.           'Authorization': `Bearer ${API_KEY}`,
13.         },
14.       }
15.     );
16.     const data = await response.json();
17.     return data.content;
18.   } catch (error) {
19.     console.error('Error fetching translations:', error);
20.     return {};
21.   }
22. }

复制代码

案例研究：电子商务网站的国际化

让我们看一个电子商务网站如何实现国际化：

2. // pages/products/[id].js
3. import { useRouter } from 'next/router';
4. import { useTranslation } from 'next-i18next';
5. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
6. import { format } from 'date-fns';
7. import { enUS, zhCN, es, fr } from 'date-fns/locale';
9. const locales = { en: enUS, zh: zhCN, es: es, fr: fr };
11. export default function ProductPage({ product }) {
12.   const { locale } = useRouter();
13.   const { t } = useTranslation(['common', 'products']);
15.   const formattedPrice = new Intl.NumberFormat(locale, {
16.     style: 'currency',
17.     currency: product.currency,
18.   }).format(product.price);
20.   const formattedDate = format(new Date(product.releaseDate), 'PPP', {
21.     locale: locales[locale],
22.   });
24.   return (
25.     <div>
26.       <h1>{product.name[locale]}</h1>
27.       <p>{product.description[locale]}</p>
28.       <p>{t('products:price')}: {formattedPrice}</p>
29.       <p>{t('products:release_date')}: {formattedDate}</p>
30.       <button>{t('common:add_to_cart')}</button>
31.     </div>
32.   );
33. }
35. export async function getStaticPaths({ locales }) {
36.   const products = await getProducts(); // 假设这是一个获取所有产品的函数
37.   const paths = [];
39.   products.forEach((product) => {
40.     locales.forEach((locale) => {
41.       paths.push({
42.         params: { id: product.id },
43.         locale,
44.       });
45.     });
46.   });
48.   return {
49.     paths,
50.     fallback: 'blocking',
51.   };
52. }
54. export async function getStaticProps({ params, locale }) {
55.   const product = await getProduct(params.id); // 假设这是一个获取特定产品的函数
57.   return {
58.     props: {
59.       product,
60.       ...(await serverSideTranslations(locale, ['common', 'products'])),
61.     },
62.     revalidate: 60, // ISR: 每60秒重新生成页面
63.   };
64. }

复制代码

总结与展望

Next.js提供了强大的国际化支持，使开发者能够轻松构建全球化的网站应用。通过本文介绍的技术和最佳实践，你可以：

1. 设置和管理多语言路由
2. 实现内容翻译和本地化
3. 处理日期、数字和货币的格式化
4. 优化SEO以提高国际可见性
5. 优化性能以提供更好的用户体验
6. 实现高级的国际化功能

随着全球化趋势的加强，网站和应用程序的国际化将变得越来越重要。Next.js团队也在不断改进其国际化功能，未来可能会有更多强大的特性被引入。

作为开发者，我们应该将国际化视为开发过程中的一个重要部分，而不是事后添加的功能。通过采用本文介绍的最佳实践，你可以确保你的Next.js应用能够真正走向全球，为不同语言和地区的用户提供优质的体验。

无论你是在构建一个小型博客还是一个大型电子商务平台，掌握Next.js的国际化技巧都将帮助你的产品在全球市场中取得成功。希望本文能够为你的国际化之旅提供有价值的指导和启发。

版权声明

1、转载或引用本网站内容(掌握Next.js国际化技巧让你的网站应用走向全球)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-41335-1-1.html