next-intl

HuynhSang2005's avatarfrom HuynhSang2005

Cách dùng next-intl trong Next.js 16 App Router của repo này (Vietnamese UI, server/client patterns, locale routing).

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for implementing internationalization (i18n) in Next.js 16 App Router applications using next-intl. It specializes in Vietnamese UI localization, offering standardized patterns for both Server and Client Components, ensuring SEO-friendly locale routing, and maintaining strict coding standards for message management and asynchronous parameter handling.

Use Cases

  • Implementing Server-Side Rendering (SSR) translations using getTranslations for optimized SEO and performance.
  • Developing interactive Client Components with useTranslations hooks while adhering to strict 'use client' directive patterns.
  • Configuring localized routing and automated message merging for Vietnamese and fallback locales within the Next.js 16 App Router structure.
  • Standardizing UI text management to eliminate hardcoded strings and ensure consistent localization across large-scale web applications.
namenext-intl
descriptionCách dùng next-intl trong Next.js 16 App Router của repo này (Vietnamese UI, server/client patterns, locale routing).

Nguồn trong repo

  • Request config (merge messages + fallback): apps/web/src/i18n/request.ts
  • Locale messages: apps/web/src/i18n/locales/*.json (ưu tiên vi.json)
  • Usage examples: nhiều components dùng getTranslations/useTranslations.

Quy tắc bắt buộc

  • UI text phải tiếng Việt qua next-intl (không hardcode English strings).
  • Next.js 16: luôn await params và await searchParams trong pages.

Server vs Client

Server Components

  • Dùng getTranslations('namespace'):
    • const t = await getTranslations('site')
  • Nếu cần locale cụ thể: getTranslations({ locale, namespace }) (đã có pattern trong repo).

Client Components

  • Dùng useTranslations('namespace') và/hoặc useLocale().
  • Chỉ thêm 'use client' khi có state/effect/event handlers.

Messages loading

  • request.ts merge fallback messages từ default locale + locale hiện tại.
  • Khi thêm key mới, update apps/web/src/i18n/locales/vi.json (và locale khác nếu có).

Routing

  • Locale list/config nằm ở config/routing (được import trong request.ts).
  • Khi tạo route mới dưới app/[locale]/..., đảm bảo text UI qua i18n.