国际化 (i18n)

import { NextRequest } from 'next/server';
import { getLocale, getLocalizedPath } from '@/lib/i18n';

export function middleware(request: NextRequest) {
  // 从 URL、cookie 或头部检测区域
  const locale = getLocale(request);
  
  // 如果需要则重定向
  if (!request.nextUrl.pathname.startsWith(`/${locale}`)) {
    const localizedPath = getLocalizedPath(request.nextUrl.pathname, locale);
    return Response.redirect(new URL(localizedPath, request.url));
  }
}

export function getLocalizedPath(path: string, locale: string): string {
  if (locale === 'en') {
    return path; // 默认区域不需要前缀
  }
  return `/${locale}${path}`;
}

export function detectLocale(request: NextRequest): string {
  // 首先检查 URL，然后检查 cookie，然后检查 Accept-Language
  // 返回检测到的区域或回退到 'en'
}

"use client";

import { useTranslations } from "@/hooks/useTranslations";

function ClientComponent() {
  const { t, isLoading, locale } = useTranslations();
  
  if (isLoading) return <div>加载中...</div>;
  
  return (
    <div>
      <h1>{t('common:title')}</h1>
      <button>{t('auth:signIn')}</button>
    </div>
  );
}

// 在翻译文件中: "welcome": "欢迎，{{name}}！"
<span>{t('common:welcome', { name: 'John' })}</span>

// 带计数: "itemCount": "找到 {{count}} 个项目"
<span>{t('search:itemCount', { count: 42 })}</span>

const { t, locale } = useTranslations();

return (
  <div>
    <p>{t('common:currentLanguage')}: {locale}</p>
    {locale === 'zh' && (
      <p>{t('common:chineseSpecificMessage')}</p>
    )}
  </div>
);

export const SUPPORTED_LOCALES = ['en', 'zh', 'es'] as const;
export type Locale = typeof SUPPORTED_LOCALES[number];

export const LOCALE_NAMES: Record<Locale, string> = {
  en: 'English',
  zh: '中文',
  es: 'Español'
};

import { SUPPORTED_LOCALES } from '@/lib/i18n';

export function middleware(request: NextRequest) {
  // 更新区域检测以包含新语言
  const supportedLocales = SUPPORTED_LOCALES;
  // ... 其余中间件逻辑
}

# 检查缺失的翻译键
grep -r "t('" apps/frontend/app --include="*.tsx" | \
  grep -v "useTranslations"

# 验证 JSON 文件
for file in public/locales/*/*.json; do
  echo "检查 $file"
  cat "$file" | jq . > /dev/null
done

"use client";

import { useTranslations } from "@/hooks/useTranslations";

export function TranslationDebugger() {
  const { t, locale, isLoading } = useTranslations();
  
  return (
    <div className="debug-panel">
      <p>当前区域: {locale}</p>
      <p>正在加载: {isLoading.toString()}</p>
      <p>测试翻译: {t('common:save')}</p>
    </div>
  );
}