How to Build a multilingual 404 — not found Page in a Next.js 15 Internationalized App

// app/[locale]/layout.tsx
 
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import "../globals.css";
import { TranslationProvider } from "@/hooks/useTranslation";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
 
const LOCALES = ["es", "en"] as const;
type Locale = (typeof LOCALES)[number];
 
export const dynamicParams = false;
export function generateStaticParams() {
  return LOCALES.map((locale) => ({ locale }));
}
 
export default function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale } = params;
  if (!LOCALES.includes(locale as Locale)) notFound();
 
  return (
    <TranslationProvider locale={locale as Locale}>
      <Navbar />
      {children}
      <Footer />
    </TranslationProvider>
  );
}

// app/[locale]/[...slug]/page.tsx
 
import { notFound } from "next/navigation";
 
export default function LocaleCatchAll() {
  notFound();
}

// app/[locale]/not-found.tsx
 
"use client";
 
import Link from "next/link";
import { useTranslation } from "@/hooks/useTranslation";
import { getLocalizedRoute } from "@/utils/navigation";
 
export default function NotFound() {
  const { t, language } = useTranslation();
 
  return (
    <section className="min-h-[60vh] grid place-items-center px-6 py-20 text-center">
      <div className="space-y-6">
        <p className="uppercase opacity-60">{t("not-found.kicker")}</p>
        <h1 className="text-4xl md:text-6xl font-bold">{t("not-found.title")}</h1>
        <p className="opacity-80">{t("not-found.description")}</p>
        <div className="flex gap-4 justify-center pt-4">
          <Link
            href={getLocalizedRoute("/", language)}
            className="border px-4 py-2 rounded"
          >
            {t("not-found.go-home")}
          </Link>
          <Link
            href={getLocalizedRoute("contact", language)}
            className="border px-4 py-2 rounded"
          >
            {t("not-found.contact")}
          </Link>
        </div>
      </div>
    </section>
  );
}

// utils/routeTranslations.ts
export const routeTranslations = {
  es: {
    "about-us": "sobre-nosotros",
    services: "servicios",
    contact: "contacto",
  },
  en: {
    "about-us": "about-us",
    services: "services",
    contact: "contact",
  },
};
 
export const routeMapping = {
  "sobre-nosotros": "about-us",
  servicios: "services",
  contacto: "contact",
  "about-us": "sobre-nosotros",
  services: "servicios",
  contact: "contacto",
};
 
export const locales = ["es", "en"] as const;
export const defaultLocale = "es" as const;
export type Language = (typeof locales)[number];

// utils/navigation.ts
 
import { routeTranslations, routeMapping, type Language } from "./routeTranslations";
 
function normalize(path: string) {
  return path.replace(/^\/+/, "").replace(/\/+$/, "");
}
 
export function getLocalizedRoute(route: string, language: Language): string {
  if (!route || route === "/") return `/${language}`;
  const clean = normalize(route);
  const dict = routeTranslations[language] ?? {};
  const translated = (dict as Record<string, string>)[clean] ?? clean;
  return `/${language}/${translated}`.replace(/\/+/g, "/");
}
 
export function getRouteForLanguageSwitch(
  currentRoute: string,
  target: Language,
): string {
  const clean = normalize(currentRoute);
  const parts = clean.split("/");
  const pathParts = parts[0] === "es" || parts[0] === "en" ? parts.slice(1) : parts;
  const mapped = pathParts.map((p) => routeMapping[p] ?? p).join("/");
  return `/${target}/${mapped}`.replace(/\/+/g, "/");
}

"use client";
 
import { createContext, useContext, useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { defaultLocale, type Language } from "@/utils/routeTranslations";
 
const TranslationContext = createContext<any>(null);
 
export function TranslationProvider({
  children,
  locale,
}: {
  children: React.ReactNode;
  locale: Language;
}) {
  const pathname = usePathname();
  const [language, setLanguage] = useState<Language>(locale || defaultLocale);
  const [translations, setTranslations] = useState<any>({});
 
  useEffect(() => {
    import(`@/locales/${language}.json`).then((mod) => setTranslations(mod.default));
  }, [language]);
 
  const t = (key: string) => {
    const keys = key.split(".");
    return keys.reduce((obj, k) => (obj && obj[k] ? obj[k] : key), translations);
  };
 
  return (
    <TranslationContext.Provider value={{ t, language }}>
      {children}
    </TranslationContext.Provider>
  );
}
 
export function useTranslation() {
  return useContext(TranslationContext);
}