Internationalization (i18n)

npm install i18next react-i18next

// src/lib/i18n.ts
import i18next from "i18next";
import { getContext } from "dinou";

export const resources = {
  en: {
    translation: {
      title: "Interactive i18n Demo",
      serverMessage: "Rendered directly on Node.js with getFixedT() (0 kB client JS)!",
      serverNested: "Rendered deep in the RSC tree with getServerT() (zero prop drilling)!",
      clientMessage: "Translated inside a Client Component using useTranslation()!",
      save: "Save Changes",
      newsletter: {
        placeholder: "[email protected]",
        subscribe: "Subscribe",
        subscribing: "Subscribing...",
        success: "Thank you for subscribing!",
        invalidEmail: "Please enter a valid email address.",
      },
    },
  },
  es: {
    translation: {
      title: "Demostración Interactiva de i18n",
      serverMessage: "¡Renderizado directamente en Node.js con getFixedT() (0 kB de JS cliente)!",
      serverNested: "¡Renderizado profundo en el árbol RSC con getServerT() (cero prop drilling)!",
      clientMessage: "¡Traducido dentro de un Client Component usando useTranslation()!",
      save: "Guardar Cambios",
      newsletter: {
        placeholder: "[email protected]",
        subscribe: "Suscribirse",
        subscribing: "Suscribiendo...",
        success: "¡Gracias por suscribirte!",
        invalidEmail: "Por favor introduce un email válido.",
      },
    },
  },
} as const;

if (!i18next.isInitialized) {
  i18next.init({
    resources,
    fallbackLng: "en",
    interpolation: { escapeValue: false },
  });
}

// 1. Explicit Server Helper: returns 't' bound to an explicit language parameter
export function getFixedT(lang: string) {
  return i18next.getFixedT(lang);
}

// 2. Zero-Prop-Drilling Server Helper: automatically resolves context.lang from AsyncLocalStorage.
// Deeply nested Server Components can call this anywhere without needing props from parent pages!
export function getServerT() {
  const { lang = "en" } = getContext() as { lang?: string };
  return getFixedT(lang);
}

// dinou.config.mjs
import { defineConfig } from "dinou";

export default defineConfig({
  plugins: [
    {
      name: "i18n-plugin",
      onRequest(request, context) {
        const url = new URL(request.url);

        // 1. Root URL Redirection: / -> /[lang]
        if (url.pathname === "/") {
          const supportedLocales = ["en", "es"];
          const defaultLocale = "en";

          // Check saved user cookie from context.req.cookies
          const cookieLocale = context.req.cookies["locale"];
          if (cookieLocale && supportedLocales.includes(cookieLocale)) {
            return Response.redirect(new URL(`/${cookieLocale}`, request.url), 307);
          }

          // Check browser Accept-Language header
          const acceptLang = request.headers.get("accept-language") || "";
          const browserLocale = supportedLocales.find((l) =>
            acceptLang.toLowerCase().includes(l)
          );

          const targetLocale = browserLocale || defaultLocale;
          return Response.redirect(new URL(`/${targetLocale}`, request.url), 307);
        }

        // 2. Context Extension: Resolve active language for getContext()
        const supported = ["en", "es"];
        let lang = null;

        // A. From URL path (e.g. /es/about, /en/contact)
        const segments = url.pathname.split("/").filter(Boolean);
        if (segments[0] && supported.includes(segments[0])) {
          lang = segments[0];
        }

        // B. From Referer header (e.g. when triggered from Server Actions or client fetch)
        if (!lang && request.headers.get("referer")) {
          try {
            const refPath = new URL(request.headers.get("referer")).pathname;
            const refSegments = refPath.split("/").filter(Boolean);
            if (refSegments[0] && supported.includes(refSegments[0])) {
              lang = refSegments[0];
            }
          } catch {}
        }

        // C. From saved user cookie
        if (!lang && context.req.cookies["locale"]) {
          const cookieLocale = context.req.cookies["locale"];
          if (supported.includes(cookieLocale)) lang = cookieLocale;
        }

        // Attached directly to context: accessible anywhere via getContext()!
        context.lang = lang || "en";
      },
    },
  ],
});

// src/components/i18n-provider.tsx
"use client";

import { ReactNode, useEffect, useMemo } from "react";
import i18next from "i18next";
import { I18nextProvider } from "react-i18next";
import { resources } from "@/lib/i18n";

export function I18nProvider({
  locale,
  children,
}: {
  locale: string;
  children: ReactNode;
}) {
  const i18nInstance = useMemo(() => {
    const instance = i18next.createInstance();
    instance.init({
      resources,
      lng: locale,
      fallbackLng: "en",
      interpolation: { escapeValue: false },
    });
    return instance;
  }, [locale]);

  useEffect(() => {
    if (i18nInstance.language !== locale) {
      i18nInstance.changeLanguage(locale);
    }
  }, [locale, i18nInstance]);

  return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>;
}

// src/[lang]/layout.tsx
import { I18nProvider } from "@/components/i18n-provider";
import type { LayoutProps } from "dinou";

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

  return (
    <I18nProvider locale={lang}>
      {children}
    </I18nProvider>
  );
}

// src/components/language-switcher.tsx
"use client";

import { usePathname, Link } from "dinou";

const LOCALES = [
  { code: "en", label: "English" },
  { code: "es", label: "Español" },
];

export function LanguageSwitcher() {
  const pathname = usePathname();
  const segments = pathname.split("/").filter(Boolean);

  // 1. Safe active locale detection (validating against supported LOCALES)
  const currentLocale = LOCALES.some((l) => l.code === segments[0])
    ? segments[0]
    : "en";

  // 2. Helper to replace the leading language prefix (e.g. /en/about -> /es/about)
  const getLocalizedPath = (targetLocale: string) => {
    const nextSegments = [...segments];
    if (nextSegments.length > 0 && LOCALES.some((l) => l.code === nextSegments[0])) {
      nextSegments[0] = targetLocale;
    } else {
      nextSegments.unshift(targetLocale);
    }
    return "/" + nextSegments.join("/");
  };

  return (
    <div className="inline-flex items-center gap-2 p-1 rounded-lg border bg-card text-xs">
      {LOCALES.map(({ code, label }) => (
        <Link
          key={code}
          href={getLocalizedPath(code)}
          onClick={() => {
            // 3. Persist locale cookie so dinou.config.mjs remembers it on root "/" visits
            document.cookie = `locale=${code}; path=/; max-age=31536000; SameSite=Lax`;
          }}
          className={`px-2.5 py-1 rounded-md transition-colors ${
            currentLocale === code
              ? "bg-primary text-primary-foreground font-semibold shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          {label}
        </Link>
      ))}
    </div>
  );
}

// src/[lang]/layout_functions.ts
import type { LayoutFunctions } from "dinou";

// 1. Cascades down to all child routes (e.g. /[lang]/interactive, /[lang]/about, etc.)
export const getStaticPaths: LayoutFunctions<"/[lang]">["getStaticPaths"] = [
  { lang: "en" },
  { lang: "es" },
];

// 2. Strict language enclave: immediately returns 404 for unlisted locales (e.g. /fr/about)
export const allowISG: LayoutFunctions<"/[lang]">["allowISG"] = false;