Internationalization (i18n)

NextGenKit uses next-intl for internationalization.

How It Works

• Translation strings live in messages/en.json
• Namespaced by feature: nav, hero, dashboard, etc.
• Works in both client and server components

Client Components

"use client"
import { useTranslations } from "next-intl"

export function MyComponent() {
  const t = useTranslations("dashboard")
  return <h1>{t("title")}</h1>
}

Server Components

import { getTranslations } from "next-intl/server"

export default async function Page() {
  const t = await getTranslations("dashboard")
  return <h1>{t("title")}</h1>
}

Adding Translations

1. Add your key to messages/en.json:

{
  "myFeature": {
    "title": "My Feature",
    "description": "This is my feature."
  }
}

2. Use it in your component with useTranslations("myFeature") or getTranslations("myFeature").

Adding a New Language

1. Create messages/fr.json (or any locale)
2. Update i18n/request.ts to include the new locale
3. All components automatically pick up the new translations