refactor: migrate to i18next (#312)

* chore: migrate to i18next:

* bump: 2.4.1-i18next-migration.0

* bump: 2.4.1-technical-debt.0

* bump: 2.4.2-technical-debt.0

* bump: 2.4.2-rc-technical-debt.0

* fix: welcome modal

* bump: 2.4.3-rc-technical-debt.1

* fix: redirect button

* fix: translation (#314)

* chore: fix translation autocompletion

* fix: validation modal content

* fix: header title using metadata

* fix: welcome page document title

* fix: accessibility page all english translation

* fix: error page english translation

* fix: exit modal translation

* fix: VTLDevTools translation

* type: fix type issue on translation keys

* fix: visualize page translation & move translation file

* bump: 2.4.3-rc-technical-debt.3

---------

Co-authored-by: Mailine Nguyen <64129348+MailineN@users.noreply.github.com>

Author: QRuhier

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Switched i18n library from i18nifty to i18next.
+
 ## [2.4.2](https://github.com/InseeFr/stromae-dsfr/releases/tag/2.4.2) - 2026-02-09
 
 ### Changed

__mocks__/i18nifty.js

@@ -37,12 +37,15 @@
     "date-fns": "^4.1.0",
     "fast-deep-equal": "^3.1.3",
     "he": "^1.2.0",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
     "i18nifty": "^3.2.6",
     "oidc-spa": "10.0.8",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.66.0",
     "react-hot-toast": "^2.6.0",
+    "react-i18next": "^16.5.3",
     "react-number-format": "^5.4.4",
     "tsafe": "^1.8.12",
     "tss-react": "^4.9.19",

package.json

@@ -11,6 +11,7 @@ import {
 import { TelemetryProvider } from '@/contexts/TelemetryContext'
 import { routeTree } from '@/router/router'
 
+import './libs/i18n'
 import { BASE_PATH } from './utils/env'
 
 startReactDsfr({

pnpm-lock.yaml

@@ -4,26 +4,34 @@ import ArtWorkBackground from '@codegouvfr/react-dsfr/dsfr/artwork/background/ov
 import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg'
 import ArtWork from '@codegouvfr/react-dsfr/dsfr/artwork/system.svg'
 import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
 
 import { Container } from '@/components/Container'
 import { errorNormalizer } from '@/components/error/errorNormalizer'
 import { useDocumentTitle } from '@/hooks/useDocumentTitle'
-import { declareComponentKeys, useTranslation } from '@/i18n'
 
 type Props = {
   error: unknown
   reset?: () => void
   redirectTo: 'home' | 'portal' | 'visualizeForm' | undefined
 }
 
+const REDIRECT_KEY_MAP = {
+  home: 'error.redirectHome',
+  portal: 'error.redirectPortal',
+  visualizeForm: 'error.redirectVisualizeForm',
+} as const satisfies Record<NonNullable<Props['redirectTo']>, string>
+
 export function ErrorComponent(props: Props) {
   const { error, redirectTo, reset } = props
   const navigate = useNavigate()
-  const { t } = useTranslation({ ErrorComponent })
+  const { t } = useTranslation()
   const { title, subtitle, paragraph, code } = errorNormalizer(error)
 
   useDocumentTitle(title)
 
+  const redirectKey = redirectTo ? REDIRECT_KEY_MAP[redirectTo] : ''
+
   return (
     <Container>
       <div
@@ -60,7 +68,7 @@ export function ErrorComponent(props: Props) {
                 }
               })()}
             >
-              {t('error button redirect to', { redirectTo })}
+              {redirectKey ? t(redirectKey) : ''}
             </Button>
           )}
         </div>
@@ -109,12 +117,3 @@ export function ErrorComponent(props: Props) {
     </Container>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { i18n } = declareComponentKeys<{
-  K: 'error button redirect to'
-  P: { redirectTo: Props['redirectTo'] }
-  R: string
-}>()({ ErrorComponent })
-
-export type I18n = typeof i18n

src/App.tsx

@@ -1,10 +1,9 @@
 import type { ReactNode } from 'react'
 
 import { AxiosError } from 'axios'
+import i18n from 'i18next'
 
-import { declareComponentKeys, getTranslation } from '@/i18n'
-
-import { type ZodErrorName, ZodErrorWithName } from './ZodErrorWithName'
+import { ZodErrorWithName } from './ZodErrorWithName'
 import { NotFoundError } from './notFoundError'
 
 type ErrorNormalized = {
@@ -14,77 +13,77 @@ type ErrorNormalized = {
   code?: number
 }
 
-const { t } = getTranslation('errorNormalizer')
-
 export function errorNormalizer(error: unknown): ErrorNormalized {
+  const t = i18n.t
+
   if (error instanceof NotFoundError) {
     return {
-      title: t('notFound.title'),
-      subtitle: t('notFound.subtitle'),
-      paragraph: t('notFound.paragraph'),
+      title: t('error.notFound.title'),
+      subtitle: t('error.notFound.subtitle'),
+      paragraph: t('error.notFound.paragraph'),
       code: 404,
     }
   }
 
   if (error instanceof AxiosError) {
     if (!error.response) {
       return {
-        title: t('connectionError.title'),
-        subtitle: t('connectionError.subtitle'),
-        paragraph: t('connectionError.paragraph'),
+        title: t('error.connectionError.title'),
+        subtitle: t('error.connectionError.subtitle'),
+        paragraph: t('error.connectionError.paragraph'),
       }
     }
     const status = error.response.status
     switch (status) {
       case 404:
         return {
-          title: t('resourceNotFound.title'),
-          subtitle: t('resourceNotFound.subtitle'),
-          paragraph: t('resourceNotFound.paragraph'),
+          title: t('error.resourceNotFound.title'),
+          subtitle: t('error.resourceNotFound.subtitle'),
+          paragraph: t('error.resourceNotFound.paragraph'),
           code: status,
         }
       case 401:
         return {
-          title: t('unauthorized.title'),
-          subtitle: t('unauthorized.subtitle'),
-          paragraph: t('unauthorized.paragraph'),
+          title: t('error.unauthorized.title'),
+          subtitle: t('error.unauthorized.subtitle'),
+          paragraph: t('error.unauthorized.paragraph'),
           code: status,
         }
       case 403:
         return {
-          title: t('forbidden.title'),
-          subtitle: t('forbidden.subtitle'),
-          paragraph: t('forbidden.paragraph'),
+          title: t('error.forbidden.title'),
+          subtitle: t('error.forbidden.subtitle'),
+          paragraph: t('error.forbidden.paragraph'),
           code: status,
         }
       case 400:
         return {
-          title: t('badRequest.title'),
-          subtitle: t('badRequest.subtitle'),
-          paragraph: t('badRequest.paragraph'),
+          title: t('error.badRequest.title'),
+          subtitle: t('error.badRequest.subtitle'),
+          paragraph: t('error.badRequest.paragraph'),
           code: status,
         }
       case 500:
         return {
-          title: t('serverError.title'),
-          subtitle: t('serverError.subtitle'),
-          paragraph: t('serverError.paragraph'),
+          title: t('error.serverError.title'),
+          subtitle: t('error.serverError.subtitle'),
+          paragraph: t('error.serverError.paragraph'),
           code: status,
         }
       default:
         return {
-          title: t('unhandledError.title'),
-          subtitle: t('unhandledError.subtitle'),
-          paragraph: t('unhandledError.paragraph'),
+          title: t('error.unhandledError.title'),
+          subtitle: t('error.unhandledError.subtitle'),
+          paragraph: t('error.unhandledError.paragraph'),
           code: status,
         }
     }
   }
 
   if (error instanceof ZodErrorWithName) {
     return {
-      title: t('validationError.title'),
-      subtitle: t('validationError.subtitle', { name: error.name }),
+      title: t('error.validationError.title'),
+      subtitle: t('error.validationError.subtitle', { name: error.name }),
       paragraph: (
         <ul>
           {error.errors.map((e, index) => (
@@ -97,32 +96,8 @@ export function errorNormalizer(error: unknown): ErrorNormalized {
     }
   }
   return {
-    title: t('unknownError.title'),
-    subtitle: t('unknownError.subtitle'),
-    paragraph: t('unknownError.paragraph'),
+    title: t('error.unknownError.title'),
+    subtitle: t('error.unknownError.subtitle'),
+    paragraph: t('error.unknownError.paragraph'),
   }
 }
-
-type GenerateKeys<BaseKey extends string> =
-  `${BaseKey}.${Exclude<keyof ErrorNormalized, 'code'>}`
-
-type ValidationError =
-  | 'validationError.title'
-  | { K: 'validationError.subtitle'; P: { name: ZodErrorName }; R: string }
-
-type AllErrorKeys =
-  | GenerateKeys<'notFound'>
-  | GenerateKeys<'connectionError'>
-  | GenerateKeys<'resourceNotFound'>
-  | GenerateKeys<'unauthorized'>
-  | GenerateKeys<'forbidden'>
-  | GenerateKeys<'badRequest'>
-  | GenerateKeys<'serverError'>
-  | GenerateKeys<'unhandledError'>
-  | GenerateKeys<'unknownError'>
-  | ValidationError
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { i18n } = declareComponentKeys<AllErrorKeys>()('errorNormalizer')
-
-export type I18n = typeof i18n

src/components/error/ErrorComponent.tsx

@@ -1,13 +1,12 @@
 import { useEffect } from 'react'
 
-import { declareComponentKeys } from 'i18nifty'
+import { useTranslation } from 'react-i18next'
 
 import { executePreLogoutActions } from '@/hooks/prelogout'
-import { useTranslation } from '@/i18n'
 import { useOidc } from '@/oidc'
 
 export function AutoLogoutCountdown() {
-  const { t } = useTranslation({ AutoLogoutCountdown })
+  const { t } = useTranslation()
   const { autoLogoutState } = useOidc()
 
   useEffect(() => {
@@ -42,20 +41,9 @@ export function AutoLogoutCountdown() {
       }}
     >
       <div style={{ textAlign: 'center' }}>
-        <p>{t('paragraph still there')}</p>
-        <p>{t('paragraph logged out in', { secondsLeft })}</p>
+        <p>{t('header.stillThere')}</p>
+        <p>{t('header.loggedOutIn', { secondsLeft })}</p>
       </div>
     </div>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { i18n } = declareComponentKeys<
-  | 'paragraph still there'
-  | {
-      K: 'paragraph logged out in'
-      P: { secondsLeft: number }
-      R: string
-    }
->()({ AutoLogoutCountdown })
-export type I18n = typeof i18n