Improved i18n handling

Author: AlemTuzlak

app/localization/README.md

@@ -13,6 +13,11 @@ Due to the fact that the server does not care about loading in additional resour
 pass in `resources` to the `i18next` instance. This provides all the languages to your server which allows it to render
 the correct language on the server.
 
+The server side also first checks the search param for the `lng` param and uses that as the language, otherwise it checks
+the cookie and if it has the users preferred language set. If the cookie is not set it defaults to the fallback language.
+
+This is useful if the user navigates to a page without the query param set, the server will still be able to render the page in the correct language.
+
 ## Client-side
 
 The client-side is a bit more complicated. We do not want to load in all the languages on the client side as it would

app/localization/cookie.server.ts

@@ -0,0 +1,11 @@
+import { createCookie } from "react-router";
+import { getServerEnv } from "~/env.server";
+
+const env = getServerEnv()
+
+export const localeCookie = createCookie("lng", {
+  path: "/",
+  sameSite: "lax",
+  secure: env.NODE_ENV === "production",
+  httpOnly: true,
+});

app/localization/i18n.server.ts

@@ -1,11 +1,14 @@
 import { RemixI18Next } from "remix-i18next/server"
 import i18n from "~/localization/i18n" // your i18n configuration file
+import { localeCookie } from "./cookie.server"
 import { resources } from "./resource"
 
 const i18next = new RemixI18Next({
 	detection: {
 		supportedLanguages: i18n.supportedLngs,
 		fallbackLanguage: i18n.fallbackLng,
+		cookie: localeCookie,
+		order: ["searchParams", "cookie"]
 	},
 	// This is the configuration for i18next used
 	// when translating messages server-side only

app/root.tsx

@@ -1,16 +1,33 @@
 import { useTranslation } from "react-i18next"
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useRouteError } from "react-router"
+import {
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	data,
+	isRouteErrorResponse,
+	useRouteError,
+} from "react-router"
 import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
 import { LanguageSwitcher } from "./library/language-switcher"
+import { localeCookie } from "./localization/cookie.server"
 import { ClientHintCheck, getHints } from "./services/client-hints"
 import tailwindcss from "./tailwind.css?url"
 
 export async function loader({ context, request }: Route.LoaderArgs) {
 	const { lang, clientEnv } = context
 	const hints = getHints(request)
-	return { lang, clientEnv, hints }
+	return data(
+		{ lang, clientEnv, hints },
+		{
+			headers: {
+				"Set-Cookie": await localeCookie.serialize(lang),
+			},
+		}
+	)
 }
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: tailwindcss }]