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.tsx and entry.server.tsx to add language browser detection, on the client and the server.
app/utils/i18n.ts contains default configuration and ability to change language.
app/utils/i18n.server.ts contains the initialisation of remix-i18n, it is configured to use a cookie named en_lang to save the user language when the user switch language. This cookie is used for ssr, to create an html with the right lang like this <html lang="fr" ... > inside the root.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 named common as the default namespace.
Inside a React function, you can translate string by using the hook useTranslation from react-18next. This hook export a t function that can be used like this t('marketing.title.start'). _marketing+/index.tsx contains 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 the t function like this t('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.js file
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 inside user-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.ts for 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.ts file :

	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 component.

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
.github		.github
.vscode		.vscode
app		app
other		other
prisma		prisma
public		public
server		server
tests		tests
types		types
.env.example		.env.example
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
README.md		README.md
components.json		components.json
fly.toml		fly.toml
i18next-parser.config.js		i18next-parser.config.js
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

rperon/epic-stack-with-i18n

Folders and files

Latest commit

History

Repository files navigation

Epic Stack with i18next and remix-i18next

About

Topics

Resources

Stars

Watchers

Forks

Languages