Internacionalización en App Router de Next.js

Internacionalización en App Router de Next.js | Nicolás Garzón

Texto

request URL + cookie + Accept-Language
        ↓
locale negotiation
        ↓
route /[lang]/...
        ↓
load messages and regional data
        ↓
render HTML with lang, metadata and alternates

TypeScript

const supportedLocales = ["es", "en"] as const;
type Locale = (typeof supportedLocales)[number];

function isLocale(value: string): value is Locale {
  return supportedLocales.includes(value as Locale);
}

export default async function LocaleLayout({
  children,
  params,
}: LayoutProps<"/[lang]">) {
  const { lang } = await params;

  if (!isLocale(lang)) {
    notFound();
  }

  return (
    <html lang={lang}>
      <body>{children}</body>
    </html>
  );
}

TypeScript

// proxy.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const PUBLIC_FILE = /\.[^/]+$/;
const locales = ["es", "en"];

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;

  if (
    pathname.startsWith("/_next") ||
    pathname.startsWith("/api") ||
    PUBLIC_FILE.test(pathname)
  ) {
    return NextResponse.next();
  }

  const hasLocale = locales.some(
    (locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`),
  );

  if (hasLocale) {
    return NextResponse.next();
  }

  const locale = negotiateLocale(request) ?? "es";
  const url = request.nextUrl.clone();
  url.pathname = `/${locale}${pathname}`;

  return NextResponse.redirect(url);
}

TypeScript

"use server";

export async function setLocale(locale: Locale, returnPath: string) {
  const parsed = localeSchema.parse(locale);
  const store = await cookies();

  store.set("locale", parsed, {
    httpOnly: true,
    secure: true,
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24 * 365,
  });

  redirect(buildLocalizedPath(returnPath, parsed));
}

TypeScript

const dictionaries = {
  es: () => import("@/messages/es.json").then((module) => module.default),
  en: () => import("@/messages/en.json").then((module) => module.default),
};

export async function getDictionary(locale: Locale) {
  return dictionaries[locale]();
}

TypeScript

export default async function ServicesPage({
  params,
}: PageProps<"/[lang]/services">) {
  const { lang } = await params;
  const locale = parseLocale(lang);
  const dictionary = await getDictionary(locale);

  return <h1>{dictionary.services.title}</h1>;
}

TypeScript

export async function generateMetadata({
  params,
}: PageProps<"/[lang]/services">): Promise<Metadata> {
  const { lang } = await params;
  const locale = parseLocale(lang);
  const messages = await getDictionary(locale);

  return {
    title: messages.services.seoTitle,
    description: messages.services.seoDescription,
    alternates: {
      canonical: `/${locale}/${localizedServicesSlug(locale)}`,
      languages: {
        "es-CO": "/es/servicios",
        "en-US": "/en/services",
      },
    },
    openGraph: {
      locale: locale === "es" ? "es_CO" : "en_US",
    },
  };
}

TypeScript

async function getLocalizedProject(slug: string, locale: Locale) {
  "use cache";
  cacheLife("hours");
  cacheTag(`project:${slug}:${locale}`);
  return cms.getProject({ slug, locale });
}