ShipAny NextJS模板国际化支持

# ShipAny NextJS 模板国际化支持指南

ShipAny 的 NextJS 模板通常内置了国际化(i18n)支持，以下是关于如何使用和配置国际化功能的详细说明：

## 基本国际化配置

NextJS 内置了国际化路由支持，ShipAny 模板通常已配置好基础设置：

```javascript // next.config.js module.exports = { i18n: { locales: ['en', 'zh', 'ja'], // 支持的语言列表 defaultLocale: 'en', // 默认语言 localeDetection: true, // 自动检测浏览器语言 domains: [ // 可选：多域名配置 { domain: 'example.com', defaultLocale: 'en', }, { domain: 'example.cn', defaultLocale: 'zh', }, ], }, } ```

## 国际化实现方式

NextJS 会自动处理路由：

• `/about` → 默认语言页面
• `/zh/about` → 中文页面
• `/ja/about` → 日文页面

ShipAny 模板通常使用以下方式之一管理翻译内容：

方案一：JSON 文件翻译

``` /locales/ en/ common.json home.json zh/ common.json home.json ```

示例 `common.json`: ```json { "welcome": "Welcome", "description": "This is a sample description" } ```

方案二：使用 i18next 或类似库

更复杂的实现可能使用 i18next 进行更灵活的翻译管理。

## 代码中使用翻译

```javascript import { useRouter } from 'next/router';

function MyComponent() { const router = useRouter(); const { locale } = router;

// 假设有翻译函数 const t = (key) => { // 这里实现从对应locale的JSON文件中获取翻译 // 实际实现可能使用自定义hook或context };

return

```javascript // hooks/useTranslation.js import { useRouter } from 'next/router'; import en from '../locales/en/common.json'; import zh from '../locales/zh/common.json'; // 导入其他语言文件...

const translations = { en, zh, // 其他语言... };

export function useTranslation() { const router = useRouter(); const { locale } = router;

const t = (key) => { return translations[locale]?.[key] || key; };

return { t, locale }; } ```

## 链接处理

使用 `next/link` 时需要处理语言前缀：

```javascript import Link from 'next/link'; import { useRouter } from 'next/router';

function NavLink({ href, children }) { const router = useRouter(); const locale = router.locale;

return ( {children} ); } ```

## 动态路由处理

对于动态路由页面，需要处理语言参数：

```javascript // pages/[lang]/products/[id].js export async function getServerSideProps(context) { const { lang, id } = context.params; // 根据lang和id获取数据 return { props: { // 数据... }, }; } ```

## SEO 考虑

为每种语言设置不同的元标签：

```javascript import { useRouter } from 'next/router'; import Head from 'next/head';

function SEO() { const router = useRouter(); const { locale } = router;

const title = locale === 'zh' ? '中文标题' : 'English Title'; const description = locale === 'zh' ? '中文描述' : 'English description';

return ( ); } ```

## 最佳实践

1. 保持翻译文件结构一致：所有语言文件应有相同的键结构 2. 处理缺失翻译：提供回退机制 3. 性能优化：考虑按需加载翻译文件 4. 测试所有语言：确保每种语言都能正常工作 5. 考虑RTL支持：如果需要支持从右到左的语言(如阿拉伯语)

## 常见问题解决

1. 语言切换后404错误：检查next.config.js中的locales配置是否正确 2. 翻译不显示：检查翻译文件路径和键名是否正确 3. 默认语言不生效：确保defaultLocale设置正确 4. 动态路由问题：确保[lang]参数在路由配置中正确设置

ShipAny的NextJS模板通常已经处理了大部分国际化基础工作，您可能只需要根据项目需求调整翻译内容和配置即可。

  END