> For the complete documentation index, see [llms.txt](https://react-dsfr.codegouv.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-dsfr.codegouv.studio/i18n.md). # Internationalization DSFR components contain hard coded strings. These strings can be switched from a langage to another with a provider. ![When lang="en"](https://user-images.githubusercontent.com/6702424/202221151-9e04dd77-da52-4ce7-b1b1-5bb653addf50.png) ![When lang="fr"](https://user-images.githubusercontent.com/6702424/202221309-b11b89a7-4893-442b-ab2a-92f85177ba69.png) Integration with i18n libraries {% tabs %} {% tab title="i18nifty" %} {% embed url="" %} A type safe internationalisation library for SPAs and Next.js {% endembed %} ```tsx import { useLang } from "i18n"; startDsfrReact({ defaultColorScheme: "system", useLang: function useLangDsfr() { const { lang } = useLang(); return lang; } }); ``` Example setup [in Next.js](https://github.com/etalab/etalab-website/blob/b427049dd9609ddbdd5fc2b42484d700e20851f4/pages/_app.tsx#L39-L42) / In a SPA. {% hint style="warning" %} DISCLAMER: I'm the author of i18nifty. While I can confidently recommend it for SPAs, I have to warn you that using i18nifty in Next.js will force you to opt out from[ Automatic Static Optimization](https://nextjs.org/docs/messages/opt-out-auto-static-optimization) and bundle all your translations in the JavaScript bundle. SSR, SSO will work fine though. {% endhint %} {% endtab %} {% tab title="Next.js i18n App Router" %} {% embed url="" %} At the bottom you have setup examples {% endembed %} Assuming you have configured Next so that you have a lang prop provided to you in the main layout:

import { i18n } from '../../i18n-config'

export async function generateStaticParams() {
  	return i18n.locales.map((locale) => ({ lang: locale }))
}

export default function Root({
  children,
  params,
}: {
  children: React.ReactNode
  params: { lang: string }
}) {
	const { lang } = params;
	return (
		<html
			{...getHtmlAttributes({ defaultColorScheme, lang })}
		>
			<head>
			{/*...*/}
			</head>
			<body>
				<DsfrProvider lang={lang}>
					{/*...*/}
				</DsfrProvider>
			</body>
		</html>
	);
}

{% endtab %} {% tab title="Next.js i18n Page Router" %} {% embed url="" %} Assuming you have enabled internationalized routing:

import { useRouter } from "next/router";

const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
	"defaultColorScheme": "system",
	Link,
	useLang: () => {
		const { locale = "fr" } = useRouter();
		return locale;
	}
});

{% endtab %} {% tab title="Other i18n library" %} It's up to you to replace in the following example `"fr"` by the desired locale using to tooling exposed by your i18n library. ```tsx startDsfrReact({ defaultColorScheme: "system", useLang: () => "fr" }); ``` {% endtab %} {% endtabs %} ### Adding translations or overwriting default text The components usually come with one or two translations by default, typically english (`en`), spanish (`es`) and sometime german (`de`). [Illustration with the \ component](https://github.com/codegouvfr/react-dsfr/blob/e8b78dd5ad069a322fbcc34b34b25d4ac8214e34/src/DarkModeSwitch.tsx#L162-L199). You can add translation for extra language on a component basis, like so: ```tsx import { addAlertTranslations } from "@codegouvfr/react-dsfr/Alert"; addAlertTranslations({ lang: "zh-CN", messages: { hide message: "隐藏消息" } }); ``` The above code adds chinese (`zh-CN`) support for the Alert component. You can call `addAlertTranslations()` wherever, just be sure it's evaluated before the first use of the component, here ``. You can also use this approach for overwiting the default text. Example: ```tsx import { addDisplayTranslations } from "@codegouvfr/react-dsfr/Display"; addDisplayTranslations({ lang: "fr", messages: { "dark theme": "Thème sombre 🤩", } }); ```

It goes without saying this is not a recommended customization of the Display Modal

#### With Next App Router When utilizing Next in App Router mode, it's crucial to accurately add or overwrite translations at the proper location. For components that you use as server components, such as `

`, `