i18n Internationalization

1// src/i18n/messages/en.json
2{
3  "common": {
4    "loading": "Loading...",
5    "error": "Error",
6    "success": "Success",
7    "save": "Save",
8    "cancel": "Cancel",
9    "delete": "Delete",
10    "edit": "Edit",
11    "create": "Create",
12    "search": "Search"
13  },
14  "auth": {
15    "signIn": "Sign In",
16    "signOut": "Sign Out",
17    "signUp": "Sign Up",
18    "email": "Email",
19    "password": "Password",
20    "forgotPassword": "Forgot Password?",
21    "continueWithGoogle": "Continue with Google"
22  },
23  "nav": {
24    "home": "Home",
25    "dashboard": "Dashboard",
26    "settings": "Settings",
27    "billing": "Billing"
28  },
29  "dashboard": {
30    "welcome": "Welcome back",
31    "overview": "Overview",
32    "recentActivity": "Recent Activity"
33  }
34}

1// src/app/dashboard/page.tsx
2import { getTranslations } from "next-intl/server";
3
4export default async function DashboardPage() {
5  const t = await getTranslations("dashboard");
6
7  return (
8    <div>
9      <h1>{t("welcome")}</h1>
10      <h2>{t("overview")}</h2>
11    </div>
12  );
13}

1"use client";
2
3import { useTranslations } from "next-intl";
4
5export function WelcomeMessage() {
6  const t = useTranslations("dashboard");
7
8  return (
9    <div>
10      <h1>{t("welcome")}</h1>
11    </div>
12  );
13}

1// src/components/i18n/locale-switcher.tsx
2"use client";
3
4import { useLocale } from "next-intl";
5import { useRouter, usePathname } from "next/navigation";
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuItem,
10  DropdownMenuTrigger,
11} from "@/components/ui/dropdown-menu";
12import { Button } from "@/components/ui/button";
13import { Globe } from "lucide-react";
14import { locales, localeNames, localeFlags, type Locale } from "@/i18n/config";
15
16export function LocaleSwitcher() {
17  const locale = useLocale() as Locale;
18  const router = useRouter();
19  const pathname = usePathname();
20
21  function handleLocaleChange(newLocale: Locale) {
22    const segments = pathname.split("/");
23    if (locales.includes(segments[1] as Locale)) {
24      segments[1] = newLocale;
25    } else {
26      segments.splice(1, 0, newLocale);
27    }
28    router.push(segments.join("/") || "/");
29  }
30
31  return (
32    <DropdownMenu>
33      <DropdownMenuTrigger asChild>
34        <Button variant="ghost" size="sm" className="font-mono text-xs">
35          <Globe className="mr-1 h-4 w-4" />
36          {localeFlags[locale]} {locale.toUpperCase()}
37        </Button>
38      </DropdownMenuTrigger>
39      <DropdownMenuContent align="end">
40        {locales.map((loc) => (
41          <DropdownMenuItem
42            key={loc}
43            onClick={() => handleLocaleChange(loc)}
44            className={loc === locale ? "bg-primary/10" : ""}
45          >
46            <span className="mr-2">{localeFlags[loc]}</span>
47            {localeNames[loc]}
48          </DropdownMenuItem>
49        ))}
50      </DropdownMenuContent>
51    </DropdownMenu>
52  );
53}

1$// 1. Copy an existing message file
2$cp src/i18n/messages/en.json src/i18n/messages/ko.json
3
4$// 2. Translate the strings in ko.json
5
6$// 3. Update config.ts
7$export const locales = ["en", "es", "fr", "de", "pt", "ja", "ko"] as const;
8
9$export const localeNames: Record<Locale, string> = {
10$  // ...existing
11$  ko: "한국어",
12$};
13
14$export const localeFlags: Record<Locale, string> = {
15$  // ...existing
16$  ko: "🇰🇷",
17$};