cydweb/app/[locale]/layout.tsx

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Script from "next/script";
import { NextIntlClientProvider, hasLocale } from "next-intl";
import { getMessages, getTranslations, setRequestLocale } from "next-intl/server";
import { DM_Sans, Syne } from "next/font/google";
import { routing } from "@/i18n/routing";
import { LanguageSwitcher } from "@/components/language-switcher";

const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-body",
  display: "swap",
});

const syne = Syne({
  subsets: ["latin"],
  variable: "--font-display",
  weight: ["600", "700", "800"],
  display: "swap",
});

type Props = {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
};

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  const languages = Object.fromEntries(
    routing.locales.map((l) => [l, `/${l}`])
  );

  return {
    title: t("title"),
    description: t("description"),
    metadataBase: new URL(
      process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"
    ),
    alternates: {
      canonical: `/${locale}`,
      languages,
    },
    openGraph: {
      title: t("title"),
      description: t("description"),
      locale: locale === "zh" ? "zh_CN" : "en_US",
      type: "website",
      siteName: "CYD Flasher",
    },
    twitter: {
      card: "summary_large_image",
      title: t("title"),
      description: t("description"),
    },
    robots: {
      index: true,
      follow: true,
    },
  };
}

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) notFound();

  setRequestLocale(locale);
  const messages = await getMessages();
  const t = await getTranslations("brand");
  const tf = await getTranslations("footer");

  return (
    <html lang={locale} className={`${dmSans.variable} ${syne.variable}`}>
      <body className="antialiased">
        <Script
          src="https://umami.dsx2020.com/script.js"
          data-website-id="477bc497-9718-4b81-bc02-1fa539eb12e3"
          strategy="afterInteractive"
        />
        <NextIntlClientProvider messages={messages}>
          <div className="bg-grid" aria-hidden />
          <div className="bg-glow" aria-hidden />

          <header className="animate-rise relative z-10 mx-auto flex max-w-[1180px] flex-wrap items-center justify-between gap-4 px-[clamp(1.25rem,4vw,3rem)] pt-6">
            <div>
              <div className="flex items-center gap-2.5">
                <span
                  className="size-[1.15rem] rounded-[3px] bg-[linear-gradient(145deg,var(--accent-hot),#c98900)] shadow-[0_0_0_3px_rgba(240,197,10,0.2)]"
                  aria-hidden
                />
                <span className="font-[family-name:var(--font-display)] text-[clamp(1.6rem,4vw,2.1rem)] font-extrabold leading-none tracking-tight">
                  {t("name")}
                </span>
              </div>
              <p className="mt-1.5 text-[0.95rem] text-[var(--muted)]">
                {t("tagline")}
              </p>
            </div>
            <LanguageSwitcher />
          </header>

          <main className="relative z-10 mx-auto max-w-[1180px] px-[clamp(1.25rem,4vw,3rem)] py-7 pb-12">
            {children}
          </main>

          <footer className="relative z-10 mx-auto flex max-w-[1180px] flex-wrap gap-x-6 gap-y-2 px-[clamp(1.25rem,4vw,3rem)] pb-10 text-xs text-[var(--muted)] opacity-85">
            <span>{tf("offsets")}</span>
            <span>{tf("stack")}</span>
          </footer>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}