# 下一个国际化 i18n ## 配置 // i18n.config.ts 导出 const locales = ['pt-PT', 'en', 'tr', 'es', 'fr', 'de'] as const; 导出类型 Locale = (typeof locales)[number]; 导出 const defaultLocale: Locale = 'pt-PT'; // i18n/request.ts 从“next-intl/server”导入{ getRequestConfig }；从 '@/i18n.config' 导入 { locales, type Locale }; 导出默认 getRequestConfig(async ({ requestLocale }) => { 让 locale = 等待 requestLocale； if (!locale || !locales.includes(locale as Locale)) { 语言环境 = 'pt-PT'; } 返回{ 语言环境，消息：（等待导入（`@/messages/${locale}.json`））.default， }; }); ## 中间件 // 中间件.ts 从“next-intl/middleware”导入createMiddleware；从 '@/i18n.config' 导入 { locales, defaultLocale }; 导出默认createMiddleware({ 语言环境，默认语言环境， localePrefix: '总是', }); 导出常量配置= { 匹配器: ['/', '/(pt-PT|en|tr|es|fr|de)/:path*'], }; ## 消息文件结构消息/ ├── pt-PT.json ├── en.json ├── tr.json ├── es.json ├── fr.json └── de.json // 消息/en.json { “导航”：{ “家”：“家”， “关于”：“关于”， “服务”：“服务”， "book": "预订会议" }, “英雄”：{ "title": "普拉提和瑜伽带来力量和平静", "subtitle": "通过个性化辅导改变你的身体和思想", "cta": "立即预订" }, “常见”：{ "learnMore": "了解更多", "阅读更多": "阅读更多" }, “形式”：{ “姓名”：“姓名”， “电子邮件”：“电子邮件”， "消息": "消息", "提交": "提交", “错误”：{ "required": "此字段为必填项", "email": "请输入有效的电子邮箱" } } } ## 服务器组件 // 应用程序/[语言环境]/page.tsx 从 'next-intl/server' 导入 { getTranslations, setRequestLocale }; 类型道具= { params: Promise<{ locale: string }>; }; 导出默认异步函数 HomePage({ params }: Props) { const { locale } = 等待参数； setRequestLocale(区域设置); // 静态渲染需要 const t =等待 getTranslations('英雄'); 返回（

{t('标题')}

{t('字幕')}

<按钮>{t('cta')}

）； } ## 客户端组件 '使用客户端'；从 'next-intl' 导入 { useTranslations }；导出函数 ContactForm() { const t = useTranslations('form'); 返回（ <表格> <标签>{t('名称')} <输入占位符={t('名称')} /> ）； } ## 插值和复数 // 消息/en.json { "greeting": "你好，{name}！", "items": "您有 {count,plural, =0 {无项目} =1 {一项} 其他 {# 项}}", "date": "最后更新时间：{日期、日期、媒介}" } const t = useTranslations(); t('问候语', { name: '玛丽亚' }); //“你好，玛丽亚！” t('项目', { 计数: 5 }); //“你有 5 件物品” ## 语言切换器 '使用客户端'；从 'next-intl' 导入 { useLocale } ；从 'next/navigation' 导入 { usePathname, useRouter }; 从 '@/i18n.config' 导入 { locales, type Locale }; const 标签：Record<区域设置，字符串> = { 'pt-PT': 'PT', 'en': 'EN', 'tr': 'TR', 'es': 'ES', 'fr': 'FR', '德': '德', }; 导出函数 LanguageSwitcher() { const locale = useLocale(); const 路径名 = usePathname(); const 路由器 = useRouter(); const switchLocale = (newLocale: Locale) => { // 替换路径中的当前语言环境 const newPath = 路径名.replace(`/${locale}`, `/${newLocale}`); 路由器.push(newPath); }; 返回（ <选择值={语言环境} onChange={(e) => switchLocale(e.target.value as Locale)} > {locales.map((loc) => ( <选项键={loc} 值={loc}> {标签[位置]} ))} ）； } ## 静态生成 // 应用程序/[语言环境]/layout.tsx 从 '@/i18n.config' 导入 { locales } ；导出函数generateStaticParams() { return locales.map((locale) => ({ locale })); } ## 本地化元数据从 'next-intl/server' 导入 { getTranslations }；从“下一个”导入类型{元数据}；类型道具= { params: Promise<{ locale: string }>; }; 导出异步函数generateMetadata({ params }: Props): Promise { const { locale } = 等待参数； const t = wait getTranslations({ locale, 命名空间: 'meta' }); 返回{ 标题: t('标题'), 描述：t('描述'), 替代品：{ 规范：`/${locale}`，语言：{ 'pt-PT': '/pt-PT', 'en': '/en', 'tr': '/tr', 'es': '/es', 'fr': '/fr', '德': '/德', }, }, }; } ## 最佳实践 1. **始终在服务器组件启动时调用 setRequestLocale()** 进行静态渲染 2. **命名空间翻译** 按功能（导航、英雄、表单、页脚） 3. **在所有语言环境文件中保持密钥一致** 4. **对动态值使用插值**，切勿连接字符串 5. **切换语言环境时保留路径**

下一个 国际 I18n

包含技能

下一个国际 I18n