epic-stack-with-i18n
epic-stack-with-i18n copied to clipboard
rperon
Epic stack example of i18next integration
Epic Stack with i18next and remix-i18next
This demonstrates how to use i18next and remix-i18next with the Epic Stack. It includes a dropdown menu to switch from one language to an another.
This exemple is based on the usage of a cookie to save the user language but there is other way to do so, like saving the language in the user object or using the url.
To check out the changes, check the git commit history. The important parts are:
- Update on
entry.client.tsxandentry.server.tsxto add language browser detection, on the client and the server. app/utils/i18n.tscontains default configuration and ability to change language.app/utils/i18n.server.tscontains the initialisation ofremix-i18n, it is configured to use a cookie nameden_langto save the user language when the user switch language. This cookie is used for ssr, to create an html with the rightlanglike this<html lang="fr" ... >inside theroot.tsx.- Inside
root.tsx, i added a dropdown menu to let the user switch language. I'm also retrieving in the loader the current locale. - To change the language, a Form is send to
/change-language/${lang}where i set the cookie. - The translation files are located in
public/locales/${lang}/common.json. i18next support multiple namespaces for storing the translation. In this example, i'm only using one namedcommonas the default namespace. - Inside a React function, you can translate string by using the hook
useTranslationfromreact-18next. This hook export atfunction that can be used like thist('marketing.title.start')._marketing+/index.tsxcontains an exemple. - Inside a loader or action function you can use your instance of RemixI18Next
to get your translation like this :
const t = await i18next.getFixedT(request). Then you can use thetfunction like thist('auth.invalidUsernameOrPassword'). An example is available in_auth+/login.tsx.
Update 22/09/2023 :
-
I added the i18next-parser library which parse your code and add it the common message. You can configure it inside the
i18next-parser.config.jsfile -
inside
app/utils/user-validation.ts, i've added an example of how we can translate zod schema. I'm sending the translation key for each zod requirements. The translation key is then translated in the ErrorList component. I'm using comments insideuser-validation, to help i18next-parser. See https://github.com/i18next/i18next-parser#caveats -
For meta translation, i'm doing the translation inside the loader and using that value in the MetaFunction. Example in the files :
forgot-passwords.tsx,login.tsx...
Update 2/01/2024
-
The remix-stack is updated to the version of the 2/01/2024
-
Add of
i18next.d.tsfor namespace types
Update 16/02/2024
- In
entry.client.tsx, for development environement i added a custom header so that the translations are not cached into the browser. cf #5
Update 23/02/2024
- Epic stack is updated to the 22/02/2024 version with support for vite.
- The only modification necessary for making i18n-remix work with remix is to
add this in the
vite.config.tsfile :
ssr: {
noExternal: ['remix-i18next'],
},
Update 8/03/2024
- i18next-parser is back. Thanks to @fredericrous for telling me that it was no longer in the source code. Also note that 18next-parser does not support react specific <Trans /> component.
rperon