AgentSkillsCN

Next.js Internationalization (i18n)

在多语言处理、区域设置路由以及检测中间件方面践行最佳实践。

SKILL.md
--- frontmatter
name: Next.js Internationalization (i18n)
description: Best practices for multi-language handling, locale routing, and detection middleware.
metadata:
  labels: [nextjs, i18n, middleware, routing]
  triggers:
    files: ['middleware.ts', 'app/[lang]/**', 'messages/*.json']
    keywords: [i18n, locale, translation, next-intl, redirect]

Internationalization (i18n)

Priority: P2 (MEDIUM)

Use Sub-path Routing (/en, /de) and Server Components for translations.

Principles

  1. •Sub-path Routing: Use URL segments (e.g., app/[lang]/page.tsx) to manage locales.
    • •Why: SEO friendly, sharable, and cacheable.
  2. •Server-Side Translation: Load dictionary files (en.json) in Server Components.
    • •Why: Reduces client bundle size. No huge JSON blobs sent to browser.
  3. •Middleware Detection: Use middleware.ts to detect Accept-Language headers and redirect users to their preferred locale.
  4. •Type Safety: Use robust typing for translation keys to prevent broken text UI.

Implementation Pattern

See references/i18n_setup.md for Directory Structure, Middleware, and Server Component examples.

Redirect Handling Strategy

When handling redirects (Authentication, Legacy URLs) in an i18n app:

  • •Always preserve locale: Use redirect(/${lang}/login) instead of just /login.
  • •Server Actions: Return redirect(...) from actions.
  • •Next Config: Use next.config.js for legacy SEO 301s (e.g., old-site /about-us -> /en/about).