Internationalization

// Supported locales. Add a locale here and ship a matching messages/<locale>.json.
export const locales = ["en", "es"] as const;
export type Locale = (typeof locales)[number];

// Default locale
export const defaultLocale: Locale = "en";

// Locale metadata
export const localeNames: Record<Locale, string> = {
  en: "English",
  es: "Español",
};

// Currency formats
export const currencyFormats: Record<Locale, { currency: string; locale: string }> = {
  en: { currency: "USD", locale: "en-US" },
  es: { currency: "EUR", locale: "es-ES" },
};

import { hasLocale } from "next-intl";
import { getRequestConfig } from "next-intl/server";
import { locales, defaultLocale } from "./config";

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  const locale = hasLocale(locales, requested) ? requested : defaultLocale;

  return {
    locale,
    messages: (await import(`@/messages/${locale}.json`)).default,
  };
});

import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "@/lib/i18n/config";

export default createMiddleware({
  locales,
  defaultLocale,
  localePrefix: "as-needed",
});

export const config = {
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

import { NextIntlClientProvider, hasLocale } from "next-intl";
import { getMessages, setRequestLocale } from "next-intl/server";
import { notFound } from "next/navigation";
import { locales } from "@/lib/i18n/config";

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  // In Next.js 15+ params is a Promise and must be awaited.
  const { locale } = await params;

  // Validate the locale without an unsafe cast.
  if (!hasLocale(locales, locale)) {
    notFound();
  }

  // Enable static rendering for locale-aware server components.
  setRequestLocale(locale);

  const messages = await getMessages();

  return <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>;
}

{
  "common": {
    "loading": "Loading...",
    "error": "Something went wrong",
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete"
  },
  "auth": {
    "signIn": "Sign in",
    "signOut": "Sign out",
    "signUp": "Sign up"
  },
  "greeting": {
    "hello": "Hello, {name}!",
    "welcome": "Welcome back, {name}"
  },
  "errors": {
    "required": "{field} is required",
    "notFound": "Page not found"
  }
}

"use client";

import { useLocale } from "next-intl";
import { useRouter, usePathname } from "next/navigation";
import { locales, localeNames, type Locale } from "@/lib/i18n/config";

export function LocaleSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();

  const handleChange = (newLocale: Locale) => {
    const segments = pathname.split("/");
    if (locales.includes(segments[1] as Locale)) {
      segments[1] = newLocale;
    } else {
      segments.splice(1, 0, newLocale);
    }
    router.push(segments.join("/"));
  };

  return (
    <select
      value={locale}
      onChange={(e) => handleChange(e.target.value as Locale)}
      className="rounded-lg border px-4 py-2"
    >
      {locales.map((loc) => (
        <option key={loc} value={loc}>
          {localeNames[loc]}
        </option>
      ))}
    </select>
  );
}

"use client";

import { useFormatter, useLocale } from "next-intl";
import { currencyFormats, type Locale } from "@/lib/i18n/config";

export function useFormatted() {
  const format = useFormatter();
  const locale = useLocale() as Locale;

  return {
    date: (date: Date | number, options?: Intl.DateTimeFormatOptions) =>
      format.dateTime(date, options),
    relative: (date: Date | number) => format.relativeTime(date),
    number: (value: number, options?: Intl.NumberFormatOptions) => format.number(value, options),
    currency: (value: number) => {
      const { currency, locale: currencyLocale } = currencyFormats[locale];
      return new Intl.NumberFormat(currencyLocale, { style: "currency", currency }).format(value);
    },
    percent: (value: number) =>
      format.number(value, { style: "percent", maximumFractionDigits: 1 }),
  };
}