Next.js App Router with i18next (Internationalization Tutorial)

Copy code snippets seen in this video from the tutorial here:

Middleware config RegEx: /((?!api|static|.*\\..*|_next).*)

[inexus]

Two things I want to add:
1. I highly recommend implementing SSG for all locales by using "generateStaticParams" in your root layout. An example of this can be found in at the bottom of the tutorial in the description of this video.
2. At 25:37 I click the link on the Italian page and it takes me to the home page in English. In the latest version of next-i18n-router, it will stay on the Italian locale without us having to set a cookie 🎉 But if you prefer the functionality seen in this video, you can set the new "serverSetCookie" config option to "never".

[marcsalem]

Thank you for the great explanation! it is very uncommon to find good i18next tutorials for next.js 14 with the App Router. Works like a charm!

[daniyal-waris]

Wow, what a fantastic tutorial! I've been struggling to implement multilanguage support on my website, but thanks to your clear and concise explanation of using i18nexus, Now I am able to achieve my desired functionality. Your guidance made the process so much easier, and now my website is fully localized. Thank you so much

[SU-uv]

Best NextJS / Internationalization video so far! Thank you!

[arielmerinos]

OMG this is the highest quality tutorial I've ever saw about i18 with next, can't say THANK YOU enough

[khodis]

A few questions:

1. Is it okay that on 21:45 you are not handling the Promise returned by initTranslations function? And why do we need to call it twice? Outside of the provider and inside?
2. Why don't we just use the provider on the layout instead of adding in on all the pages? I guess it can be for controlling which parts of our website need a translation, but I don't remember something like this from the video...

[karimshousha]

i have a problem that i can access the locale in not found page that outside the locale folder
and the not found pages inside it doesn't work i didn't understand the problem

[pamphilemkp]

Wow I just have to say you are the man 😃why? because I have been trying to implement the translation on one of my projects that I built with the app router, I have been trying to read the tutorial and watch videos on YouTube with the same keyword(translation with nextjs14 app router) all the channels out there that instead of showing the app router they talk about the page router with the SRC and it wasn't quite useful because it wasn't working for APP router, finally a tutorial hitting straight to the point, just to say now that my project is live and localized thank you so much.😇😇

[marcodev]

i have so many problems using the src and typescript i wish you make a tutorial with typescript the src i can fix it my self
and this is the best tutorial ever

[dilrukshiperera-yobr]

Thankyou. Clear and concise tutorial. I made use of this.

[lordkoborg]

Guys if you face a problem with stuck application it could be due to the fact that "initTranslations" in <TranslationsProvider> is called directly in the body of the component and it gets into a loop. I fixed it by wrapping the initialization into a useEffect with [locale, namespaces, resources, i18nInstance] dependencies and also created a state to mark when it is initialized. If not initialized, render "null".

[hardtospell]

When changing a language, the scroll resets to the top of a page. Is there a way to keep it at the same place after switching?

[VenomBGR]

Dude, for daaaays i've been trying to figure out why i cant set next-intl and finally you said it - "next-intl cannot be used with app router" ...fml... why didnt the documentation i read say so!!!
The best thing is that I actually stumbled on this tutorial while looking how to set up next-intl... xD
Thank you for this tutorial!

[humaminho]

I have a question please, since I divide the content of my pages into multiple server components for code readability, and useTranslation() only works on client components how can I use i18next in my server components? (since turning every component into a client component is not an option).
PS: I tried passing locale as a prop to initTranslations() but it didn't work.

[manel]

Hi thanks for the tutorial but Im having problems with the language changer cause is not changing. I can do it manually but not with the dropdown. Also i ahve default 'en' but if I go to / that should be the same than /en it goes to /es automaticly I dont understand why

[kento_]

26:00 for my future learning
Good tutorial!

[derfabdallah]

The video covered all my questions, thank you!

[Mark-lgqe]

Hello teacher, I am using Next.js middleware, I added next-i18n-router, and then next-auth verification is invalid! I can't find the problem! !

[teosurch]

Thank You! Finally tutorial without bull*hit! Right what I need. You saved me! <3

[seb]

Thanks for your help on my previous question, I was wondering how one could change the path for different languages, e.g in English an about page may be 'about', but in another language it would be something different. How could this be achieved?