Internationalization

Last updated 4 months ago

Was this helpful?

Internationalization

DSFR components contain hard coded strings.

These strings can be switched from a langage to another with a provider.

Integration with i18n libraries

import { useLang } from "i18n";

startDsfrReact({ 
  defaultColorScheme: "system",
  useLang: function useLangDsfr() {
        const { lang } = useLang();
        return lang;
  }
});

DISCLAMER: I'm the author of i18nifty.

Assuming you have configured Next so that you have a lang prop provided to you in the main layout:

app/[lang]/layout.txs

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>
	);
}

Assuming you have enabled internationalized routing:

pages/_app.tsx

import { useRouter } from "next/router";

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

It's up to you to replace in the following example "fr" by the desired locale using to tooling exposed by your i18n library.

startDsfrReact({ 
  defaultColorScheme: "system",
  useLang: () => "fr"
});

Adding translations or overwriting default text

You can add translation for extra language on a component basis, like so:

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 <Alert />.

You can also use this approach for overwiting the default text. Example:

import { addDisplayTranslations } from "@codegouvfr/react-dsfr/Display";

addDisplayTranslations({
	lang: "fr",
	messages: {
		"dark theme": "Thème sombre 🤩",
	}
});

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 <Header />, <Footer />, or the <Display /> modal, you should make calls to addXxxTranslation within app/layout.tsx.

PreviousCSS in JS NextImporting assets

Last updated 4 months ago

Was this helpful?