Fix default language Next.js

Author: garronej

src/lib/i18n.tsx

@@ -2,10 +2,10 @@ import React, { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
 import { isBrowser } from "./tools/isBrowser";
 
-let defaultLang: undefined | string;
+let langIfNoProvider: undefined | string;
 
-export function setDefaultLang(lang: string) {
-    defaultLang = lang;
+export function setLangToUseIfProviderNotUsed(lang: string) {
+    langIfNoProvider = lang;
 }
 
 const langContext = createContext<string | undefined>(undefined);
@@ -14,7 +14,7 @@ function useLang(): string | undefined {
     const lang = useContext(langContext);
 
     if (lang === undefined) {
-        return defaultLang ?? (!isBrowser ? undefined : navigator.language);
+        return langIfNoProvider ?? (!isBrowser ? undefined : navigator.language);
     }
 
     return lang;

src/lib/start.ts

@@ -3,20 +3,20 @@ import type { ColorScheme } from "./darkMode";
 import { startObservingColorSchemeHtmlAttribute, data_fr_theme, data_fr_scheme } from "./darkMode";
 import { assert } from "tsafe/assert";
 import { symToStr } from "tsafe/symToStr";
-import { setDefaultLang } from "./i18n";
+import { setLangToUseIfProviderNotUsed } from "./i18n";
 
 export type Params = {
     defaultColorScheme: ColorScheme | "system";
-    /** If undefined it will fall back to browser preference */
-    defaultLang?: string;
+    /** If not specified it will fall back to browser preference */
+    langIfNoProvider?: string;
     /** Default: false */
     verbose?: boolean;
 };
 
 let isStarted = false;
 
 export async function startDsfrReact(params: Params) {
-    const { defaultColorScheme, verbose = false, defaultLang } = params;
+    const { defaultColorScheme, verbose = false, langIfNoProvider } = params;
 
     assert(
         isBrowser,
@@ -32,8 +32,8 @@ export async function startDsfrReact(params: Params) {
 
     isStarted = true;
 
-    if (defaultLang !== undefined) {
-        setDefaultLang(defaultLang);
+    if (langIfNoProvider !== undefined) {
+        setLangToUseIfProviderNotUsed(langIfNoProvider);
     }
 
     const isNextJsDevEnvironnement = (window as any).__NEXT_DATA__?.buildId === "development";

src/next.tsx

@@ -33,7 +33,7 @@ import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
-import { setDefaultLang } from "./lib/i18n";
+import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 
 const fontUrlByFileBasename = {
     "Marianne-Light": marianneLightWoff2Url,
@@ -119,6 +119,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
     const {
         preloadFonts = [],
         doPersistDarkModePreferenceWithCookie = false,
+        langIfNoProvider = "fr",
         ...startDsfrReactParams
     } = params;
 
@@ -130,12 +131,10 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
         startDsfrReact(startDsfrReactParams);
     } else {
         defaultColorScheme = startDsfrReactParams.defaultColorScheme;
+    }
 
-        const { defaultLang } = startDsfrReactParams;
-
-        if (defaultLang !== undefined) {
-            setDefaultLang(defaultLang);
-        }
+    if (langIfNoProvider !== undefined) {
+        setLangToUseIfProviderNotUsed(langIfNoProvider);
     }
 
     const colorSchemeKey = "dsfrColorScheme";

test/integration/next/pages/_app.tsx

@@ -1,5 +1,4 @@
 import type { AppProps } from "next/app";
-import { DsfrLangProvider } from "@codegouvfr/react-dsfr";
 import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
@@ -38,7 +37,7 @@ function App({ Component, pageProps }: AppProps) {
     const { css } = useStyles();
 
     return (
-        <DsfrLangProvider lang="fr">
+        <>
                 <Header
                     intituléOfficiel="Intitulé officiel"
                     baselinePrécisionsSurLorganisation="baseline - Précision sur l'organisation"
@@ -70,7 +69,7 @@ function App({ Component, pageProps }: AppProps) {
                 })}>
                     <Component {...pageProps} />
                 </div>
-        </DsfrLangProvider>
+        </>
     );
 }