Multi-language Support

locales/
├── en/
│   ├── common.json
│   ├── home.json
│   └── ...
└── zh/
    ├── common.json
    ├── home.json
    └── ...

// locales/zh/home.json example
{
  "title": "快速构建您的登陆页面",
  "subtitle": "用于产品验证的高质量模板",
  "cta": "立即开始",
  "features": {
    "title": "核心功能",
    "items": [
      {
        "title": "多语言支持",
        "description": "内置中英文支持，易于扩展到其他语言"
      },
      // More features...
    ]
  }
}

import { useTranslations } from 'next-intl';

export default function Hero() {
  // 'home' corresponds to locales/<language>/home.json file
  const t = useTranslations('home');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('subtitle')}</p>
      <button>{t('cta')}</button>
    </div>
  );
}

import { useTranslations } from 'next-intl';

// For App Router
export default function Page() {
  const t = useTranslations('common');
  
  return (
    <div>
      <h1>{t('title')}</h1>
      {/* Content... */}
    </div>
  );
}

// middleware.ts
export const config = {
  // Modify this to add new language codes, e.g., 'fr' for French
  matcher: ['/((?!api|_next|.*\\..*).*)']
}

export default createMiddleware({
  // Add new language code to this array
  locales: ['en', 'zh', 'fr'],
  defaultLocale: 'en'
});

cp -r locales/en locales/fr