Next.js 多语言 (2) | useTranslations、getTranslations 和 NextIntlClientProvider 的使用

在使用 Next.js 开发多语言网站时，我们通常会遇到一个重要问题：如何实现多语言（i18n） 🌍。
一开始，很多开发者都会选择使用 useTranslations 🤔，这是一个简单直接的工具。但是，这种方式只能在 客户端组件（Client Component） 中使用，而客户端组件对 SEO 不友好 ，这让人非常头疼。

通过查阅官方文档，我发现 next-intl/server 提供的getTranslations和NextIntlClientProvider。
它们可以很好地解决这个问题，同时兼顾 国际化 和 SEO 的需求。

这篇文章将从这个问题入手，帮助你理解 useTranslations 和 getTranslations 的区别，以及如何在实际项目中正确使用它们 💡。

---

问题：为什么客户端组件的 SEO 表现不好？

1. 什么是客户端组件？

客户端组件是需要加载 JavaScript 并在浏览器端渲染的组件。它们依赖 React 的交互功能，比如 useState 和 useEffect。当我们使用 useTranslations 时，就把组件变成了客户端组件。

2. SEO 的问题

客户端组件在初始加载时不会直接生成完整的 HTML，而是生成一个空白的 HTML 框架，然后通过 JavaScript 在浏览器中渲染内容。这会带来以下问题：

• 搜索引擎爬虫无法获取完整内容：比如页面的标题、描述等内容可能无法被爬取。
• 初始加载变慢：需要加载额外的 JavaScript，影响用户体验。

3. 为什么 Next.js 推荐服务端组件？

Next.js 的服务端组件（Server Components）会在服务器端生成完整的 HTML，然后将其发送到浏览器。这不仅对 SEO 友好，而且减少了客户端的 JavaScript 负担。

---

解决方案：服务端的 getTranslations

什么是 getTranslations？

getTranslations 是一个用于服务端组件的工具，它允许我们在服务端异步获取翻译内容。这样，我们可以在服务端完成国际化处理，并直接返回完整的 HTML，避免了 SEO 和性能问题。

对比：useTranslations vs getTranslations

特性	useTranslations	getTranslations
适用场景	客户端组件	服务端组件
SEO 表现	较差，内容在客户端渲染	优秀，内容在服务端渲染
是否支持异步	不支持，依赖上下文	支持，直接加载翻译文件
使用复杂度	简单，适合小型项目	需要服务端处理，但性能更优

---

具体用法

1. 使用 useTranslations（客户端组件）

当你需要在组件中使用交互功能，比如动态切换语言或表单提交时，可以使用 useTranslations。

示例：导航栏的国际化

// 文件：Navbar.tsx
'use client'; // 指定为客户端组件
import {
   
   useTranslations} from 'next-intl';

function Navbar() {
   
   
  const t = useTranslations('Navbar'); // 读取命名空间 Navbar 的翻译

  return (
    <nav>
    <a href="/">{
   
   t('home')}</a>
    <a href="/about">{
   
   t('about')}</a>
    </nav>
      );