next-intl-l10n

name	next-intl-l10n
description	Use this skill when you add or change locale-aware UI (en/de) with next-intl: routing, UI copy, and date/number/currency formatting.

next-intl Localization Skill (Freelancerino)

Use this skill when adding UI strings, formatting dates/numbers/currency, or handling locale routing.

Rules

• Locale in URL: /{locale}/... with en or de. Respect in links and revalidatePath.
• Use next-intl hooks/components:
  • Client: useTranslations, useFormatter
  • Server: getTranslations, getFormatter
• Keep messages in messages/en.json and messages/de.json; namespace keys (e.g., Invoices.title).
• Format money with currency code from data; never assume locale currency.
• Dates/times: store UTC; format with workspace/user locale and timezone when available.

Patterns

• Client component:

  const t = useTranslations("Clients");
  const format = useFormatter();
  format.number(amountCents / 100, {
    style: "currency",
    currency: currencyCode,
  });
  

• Server component:

  const t = await getTranslations("Invoices");
  

Edge cases

• Ensure links include current locale param.
• Avoid hardcoded strings; add to both en.json and de.json.
• Plurals: use ICU in messages where needed.

Testing

• Verify both locales render and format correctly.
• Run bun run lint and tsc --noEmit after message key changes.

Cost & performance notes

• Prefer formatting on the server when possible (Server Components) to keep client bundles smaller.
• Keep translation keys stable; avoid loading unnecessary namespaces in client islands.
• If a route is slow, don’t “fix” it by moving data fetching to the client—keep server-first and optimize queries/caching.

Reference: .github/skills/nextjs-cost-performance/SKILL.md

References

• Messages: messages/en.json, messages/de.json
• Routing: i18n/routing.ts, i18n/request.ts