国际化

ShipNow 内置了国际化 (i18n) 支持。它支持多种语言，开箱即用。

概述

ShipNow 的 i18n 功能包括：

➕ 轻松添加新语言
⚙️ 集中式语言配置
💻 在服务器或客户端组件中轻松使用
🔍 自动为不同语言生成 SEO 元数据
🔀 内置语言切换器和链接组件
🧭 自动语言检测和路由重定向

添加新语言

在 config/locales.ts 中添加语言：

config/locales.ts

export const locales = [
  { code: 'en', name: 'English' },
  { code: 'zh-CN', name: '简体中文' },
  { code: 'zh-TW', name: '繁體中文' }, // 添加此行
] as const;

新语言将自动在语言切换器中可用。

在 messages/ 中创建新的翻译文件：

cp messages/en.json messages/zh-TW.json

使用以下 Prompt, 请 AI 翻译内容：

Translate the following content to Traditional Chinese:
 
{
  "navigation": {
    "features": "Features",
    "pricing": "Pricing",
  },
  "seo": {
    "title": "ShipNow - Next.js AI SaaS Template",
    "description": "...",
  }
}

将结果更新到翻译文件：

messages/zh-TW.json

{
  "navigation": {
    "features": "功能",
    "pricing": "價格"
  },
  "seo": {
    "title": "ShipNow - Next.js AI SaaS 模板",
    "description": "..."
  }
}

更新翻译的内容

ShipNow 的默认语言是英文。您可以在 messages/en.json 中更新翻译内容。

messages/en.json

{
  "navigation": {
    "features": "Features",
    "pricing": "Pricing"
  },
  "seo": {
    "title": "ShipNow - Next.js AI SaaS Template",
    "description": "..."
  }
}

在服务器组件中使用

要在服务器组件中使用，请使用 getTranslations 函数：

import { getTranslations } from 'next-intl/server';
 
export async function MyServerComponent() {
  const t = await getTranslations('navigation');
  
  return <h1>{t('features')}</h1>;
}

在客户端组件中使用

要在客户端组件中使用，请使用 useTranslations 钩子：

'use client';
 
import { useTranslations } from 'next-intl';
 
export function MyClientComponent() {
  const t = useTranslations('navigation');
  
  return <button>{t('features')}</button>;
}

语言切换器组件

ShipNow 包含一个内置的语言切换器组件，允许用户更改语言：

import { LanguageSwitcher } from '@/components/language-switcher';
 
export function MyComponent() {
  return <LanguageSwitcher />;
}

链接组件

使用 Link 组件导航到带有当前语言的 URL：

// 从 `@/i18n/routing` 导入，而不是 `next/link`
import { Link } from '@/i18n/routing'; 
 
export function MyComponent() {
  return (
    // 如果是 en，生成 /docs
    // 如果是 zh-CN，生成 /zh-CN/docs
    <Link href="/docs">
      文档
    </Link>
  );
}

SEO

ShipNow 自动为不同语言生成 SEO 元数据。元数据定义在翻译文件中，并用在布局中：

app/[lang]/layout.tsx

export async function generateMetadata() {
  const t = await getTranslations('seo');
  
  return {
    title: {
      default: t('title'),
      template: `%s | ${process.env.NEXT_PUBLIC_APP_NAME}`,
    },
    description: t('description'),
    keywords: t('keywords'),
  };
}

这可确保搜索引擎读到每种语言的正确元数据。

只有一种语言？

如果您的系统只有一种语言，您可以：

在 config/locales.ts 中删除多余的语言：

config/locales.ts

export const locales = [
  { code: 'en', name: 'English' },
  { code: 'zh-CN', name: '简体中文' }, // Remove this line
] as const;

如果系统只有一种语言，则不会显示语言切换器。

在组件文件中直接使用任何文本，不需要使用 getTranslations 或 useTranslations。

需要帮助？

如果您需要帮助：

检查 next-intl 文档
加入我们的社区 Discord
在 GitHub 上打开一个问题

On this page