语言切换
如何在 Next.js 应用中配置与切换语言
语言切换让用户可以更改其偏好的 locale，从而控制应用内容所使用的语言。GT Next 提供多种方案，从简单的编程式切换到结合 middleware 的完整基于 URL 的路由。
可用方法
- 编程方式：用于自定义控件的
useSetLocale钩子 - 预构建 UI：带下拉菜单的
<LocaleSelector>组件 - 自定义 UI：用于构建自定义选择器的
useLocaleSelector钩子 - 基于 URL：通过 Middleware 路由 在 URL 路径中携带 locale
使用 useSetLocale 钩子
useSetLocale 是一个在客户端运行的钩子，可用于切换应用的语言：
import { useSetLocale } from 'gt-next/client';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>设置语言</button>;
}只需将要切换的 locale 作为参数传给该 hook 返回的函数即可。
使用 <LocaleSelector> 组件
<LocaleSelector> 组件提供了一个开箱即用的下拉菜单，会自动显示所有已配置的 locales：
import { LocaleSelector } from 'gt-next/client';
export default function MyComponent() {
return <LocaleSelector />;
}此组件将自动：
- 显示项目中配置的所有 locales
- 以各自的本地语言名称显示 locales
- 处理切换逻辑
- 保持当前选中状态
使用 useLocaleSelector 钩子
如果你想构建自定义的 locale 选择器组件，请使用 useLocaleSelector：
import { useLocaleSelector } from 'gt-next/client';
function CustomLocaleSelector() {
const {
locale, // 当前活跃的语言区域（例如，'en'、'es'）
locales, // 您的项目支持的语言区域数组 ['en', 'es', 'fr']
setLocale, // 更改语言区域的函数：setLocale('es')
getLocaleProperties // 获取语言区域显示信息的函数
} = useLocaleSelector();
if (!locales?.length) return null;
return (
<select
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{locales.map((loc) => {
const props = getLocaleProperties(loc);
return (
<option key={loc} value={loc}>
{props.nativeNameWithRegionCode} {/* 例如，"English (US)"、"Español (ES)" */}
</option>
);
})}
</select>
);
}基于 URL 的语言切换
为兼顾 SEO 与更佳的用户体验，你可以通过中间件路由在 URL 中包含 locale。更多关于该方法的说明，请参见中间件指南：
/en/products → 英语产品页面
/es/products → 西班牙语产品页面
/fr/products → 法语产品页面这种做法带来 SEO 方面的好处、可直接访问的各语言版本链接，以及便于分享的本地化链接。
重要须知
仅限客户端组件
所有用于语言切换的 hooks 和组件都必须在标记为 'use client' 的客户端组件中使用：
'use client';
import { useSetLocale } from 'gt-next/client';
function LanguageSwitcher() {
const setLocale = useSetLocale();
// ... 组件逻辑
}GTProvider 要求
语言切换组件必须在 <GTProvider> 中使用：
// ✅ 正确
<GTProvider>
<LanguageSwitcher />
</GTProvider>
// ❌ 错误 - 在提供者外部
<LanguageSwitcher />下一步
这份指南怎么样？