NextJS APP Router | i18n Internationalization (i18next - next-intl) | Multiple languages (idioms)

Time for an update!

If you have been searching youtube for tutorials on i18next (Internationalization) chances are you came across my other tutorial on the same topic.

There is some value still in that video, but when I recorded it things were not really stable (BETA).
Now, everything is stable and I can give you a topic update.
We will cover everything from the initial project setup to finally build the UI using Tailwind CSS.

3 idioms (locales) will be used in this project!
Translate your reactjs App.

Just follow all the steps and you will be able to translate your nextjs application with ease.
Let me know in the comments section below what you think of this video because I am also learning while I am teaching what I start to know!

I would like to take the chance to also say THANK YOU to all the viewers on my other tutorial. Let's translate together!

Enjoying my content so far?

👉 Chapters:
0:00 - Intro
2:19 - Project setup
3:42 - Folders and Files structure
5:26 - Messages folder (JSON files)
6:50 - i18n file
7:28 - Middleware file
7:49 - Locale folder
9:31 - Installing the next-intl package
9:49 - Developing the project ...
14:21 - Using the translations (JSON files)
17:04 - UI components
20:45- Default Locale

👉 DOCS:

[Miguel-qjdw]

By following the entire tutorial, almost everything works correctly, with the exception of the errors that are not defined, it gives me a hydration error.

[iwilldowhatiwannado]

ok.. Thanks for the video.. However.. you are using it only inside of the server component.. I expected how to use in client components.. I said before that next-intl might drop performance.. here are my questions.. is NextIntlClientProvider causes some performance issues? and can I use next-intl without generateStaticParams and unstable_setRequestLocale although I use both server and client components.. I am experiecing some performance Issues after using next-intl.. everything works well but it feels a bit slow and caching is not working.. I dont know is it next-intl's problem or from next.js..

[yousefsaeed]

I used this library in my portfolio to convert between Arabic and English or vice versa. The strange thing is that if the language is English and I switch to Arabic, then click on any link on the site, the language switches back to English. I tried to understand the reason but couldn't. I solved the problem by making the site reload 800 milliseconds after changing the language. Do you have any idea about the problem?

[ezadeeeeen]

All video the sam content , what about multi page and multi layout, there is many problem .

[hamzaking]

Hello, I have a problem with the Google search console. What is the link that will take me to the page? Am I original or /en?

[germancardosodesousa]

Hi! Great videooo! Helps me a lot.
Could you explain me how could i add a /about and /contact page on this proyect?
I saw you other video, but i could't make it works...
Thanks!!

[adenbinfarrukh]

Hi great video on translations. Wanted to ask if I can translate text without having any change in the URL ( without using /en, /fr etc or without anything like .en or .fr etc )

[kanwarsingh]

thanks for the vedio. but where can i get the source code for this?

[rokkazmvm]

Hey, is there a way to have one language(lets say english) not have any prefix by default? And others have like shown on video?

[darawan_omar]

Hiw we can change direction to rtl when change to arabic

[MohamedAymanpro]

Peace be upon you. I am a use of i18next on a site like this, and I am on the page work I create the data in a spicial js file and the displays are in the map. I want to translate the file that contains the data. I do not know how to connect it, and there is nothing in it to explain what I mean. All that is available is that it translates a sentence or two. i want to translates completly one entire file.can you help me

[togya]

Hey thanks for sharing, can you now please explain about client component?