Provide Link and useLang to backend as well in Next App Router

Author: garronej

src/link.tsx

@@ -16,7 +16,7 @@ export type RegisteredLinkProps = RegisterLink extends {
 
 let Link: (
     props: RegisteredLinkProps & { children: ReactNode }
-) => ReturnType<React.FC> = props => <a {...props} />;
+) => ReturnType<React.FC> = props=> <a {...props} />;
 
 export function setLink(params: { Link: typeof Link }): void {
     Link = props => {

src/next-appdir/DsfrHead.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, type ReactNode } from "react";
 import { objectKeys } from "tsafe/objectKeys";
 import { getAssetUrl } from "../tools/getAssetUrl";
 import AppleTouchIcon from "../dsfr/favicon/apple-touch-icon.png";
@@ -7,6 +7,8 @@ import FaviconIco from "../dsfr/favicon/favicon.ico";
 import { getScriptToRunAsap } from "../useIsDark/scriptToRunAsap";
 import { fontUrlByFileBasename } from "./zz_internal/fontUrlByFileBasename";
 import { getDefaultColorSchemeServerSide } from "./zz_internal/defaultColorScheme";
+import { setLink, type RegisteredLinkProps } from "../link";
+import { setUseLang } from "../i18n";
 //NOTE: As of now there is no way to enforce ordering in Next Appdir
 //See: https://github.com/vercel/next.js/issues/16630
 // @import url(...) doesn't work. Using Sass and @use is our last resort.
@@ -17,15 +19,31 @@ export type DsfrHeadProps = {
      * Preloading of fonts is only enabled in production.
      */
     preloadFonts?: (keyof typeof fontUrlByFileBasename)[];
+    /** Default: <a /> */
+    Link?: (props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>;
+    /** Default: ()=> "fr" */
+    useLang?: () => string;
 };
 
 const isProduction = process.env.NODE_ENV !== "development";
 
 export function DsfrHead(props: DsfrHeadProps) {
-    const { preloadFonts = [] } = props;
+    const { preloadFonts = [], Link, useLang } = props;
 
     const defaultColorScheme = getDefaultColorSchemeServerSide();
 
+    useMemo(() => {
+        if (Link !== undefined) {
+            setLink({ Link });
+        }
+    },[Link]);
+
+    useMemo(() => {
+        if (useLang !== undefined) {
+            setUseLang({ useLang });
+        }
+    },[useLang]);
+
     return (
         <>
             {isProduction &&

test/integration/next-appdir/app/layout.tsx

@@ -11,6 +11,7 @@ import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Navigation } from "./Navigation";
+import Link from "next/link";
 
 declare module "@codegouvfr/react-dsfr/gdpr" {
 	interface RegisterGdprServices {
@@ -33,6 +34,7 @@ export default function RootLayout({ children }: { children: JSX.Element; }) {
 				<title>Next 13 AppDir Demo DSFR setup</title>
 				<StartDsfr />
 				<DsfrHead
+					Link={Link}
 					preloadFonts={[
 						//"Marianne-Light",
 						//"Marianne-Light_Italic",
@@ -67,9 +69,9 @@ export default function RootLayout({ children }: { children: JSX.Element; }) {
 							<Header
 								brandTop={<>INTITULE<br />OFFICIEL</>}
 								serviceTitle="Nom du site / service"
-								homeLinkProps={{ 
-									"href": "/", 
-									"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" 
+								homeLinkProps={{
+									"href": "/",
+									"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
 								}}
 								quickAccessItems={[
 									headerFooterDisplayItem,