canonical URL, a11y, and LCP improvements

add metadata, moving splitting client and server component when needed as metadata is not allowed in a client component

reusable baseUrl

set x-url header for use in canonical urls for each page

remove hardcoded title tag

remove user-scalable=no to pass a11y checks, since it is ignored anyway by browsers now

LCP set as priority loading

src/app/[locale]/(main)/auth/sign-in/page.tsx

@@ -1,43 +1,27 @@
-"use client";
+import { Metadata } from "next";
 
-import { useLocale, useTranslations } from "next-intl";
-import { useSearchParams } from "next/navigation";
+import SignInClient from "@/app/[locale]/(main)/auth/sign-in/SignInClient";
+import { baseUrl } from "@/constants";
 
-import { SignInForm } from "@/components/SignInForm";
-import { Locale, getPathname, routing } from "@/utils/routing";
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale?: string };
+}): Promise<Metadata> {
+  return {
+    alternates: {
+      canonical:
+        locale === "fr"
+          ? `${baseUrl}/auth/sign-in`
+          : `${baseUrl}/${locale}/auth/sign-in`,
+      languages: {
+        fr: `${baseUrl}/auth/sign-in`,
+        en: `${baseUrl}/en/auth/sign-in`,
+      },
+    },
+  };
+}
 
 export default function SignIn() {
-  const t = useTranslations("SignIn");
-  const params = useSearchParams();
-  const locale = useLocale();
-
-  const allowedLocales = routing.locales as unknown as Array<string>;
-  const effectiveLocal = allowedLocales.includes(locale)
-    ? (locale as Locale)
-    : routing.defaultLocale;
-
-  const fallbackPath = getPathname({
-    locale: effectiveLocal,
-    href: { pathname: "/tournaments" },
-  });
-
-  const fallbackUrl = `/${effectiveLocal}${fallbackPath}`;
-
-  return (
-    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
-      <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-        <h2
-          className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
-          data-test="header2"
-        >
-          {t("title")}
-        </h2>
-        <p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
-          {t("info")}
-        </p>
-
-        <SignInForm callbackPath={params.get("callbackUrl") ?? fallbackUrl} />
-      </div>
-    </section>
-  );
+  return <SignInClient />;
 }