Next.js App Directory & i18n - Full Tutorial

My courses:

💻 MY GEAR

Connect with me:

#nextjs #i18n #nextjstutorial

This video was sponsored by Brilliant.

[mattburgess]

Not gonna lie the hardest part of this is figuring out whether I’m supposed to be using next-intl, react-intl, react-i18n, react-i18next, next-i18next.

It’s a complete mystery. And every tutorial or article recommends a different tool.

[GratielaBlidariu]

I usually don't leave messages, but this video is amazing! You have a great way of explaining things that makes it so much easier to understand. Thanks for this video:)

[derekgygax]

This video is great! I had just about given up on using next-intl but this video made it so clear, thank you!

[arvin]

Hi Mr. Tuomo,

Your tutorial on using Next.js for a multi-language website has been a real lifesaver for me. I've learned a lot about using next-intl for fixed content, but I've run into a challenge with dynamic content like user-created posts and comments. I'm not sure how to add them to the locales JSON files, and I've had trouble finding helpful resources on this topic.

I would be really grateful if you could point me in the right direction and maybe even consider creating a tutorial on handling dynamic content within the locales JSON files. Your help would mean a lot to me and others facing similar challenges.

Thank you so much,

[FGA-]

Thank you so much, sir! Your video was incredibly helpful ❤🫡. I wanted to mention that if you have an 'api' folder in your project, it is essential to place it outside of the '[local]' folder. Keep up the fantastic work, and thank you again for sharing your knowledge with us!

[PD-pmqf]

Great video, I wonder is there any way to translate folders (folders which are routes) in nextjs ?

[sebastianarango]

Very helpful to discover the library, however, I find it not sufficient when implementing it to an actual application, navigation and middleware not even mentioned. Thanks

[armaganvideos]

Ughhh this got soooo complicated and bad with the app directory. It was insanely straightforward with pages directory and next-i18next..

Thanks for the explanations tho :)

[angelinazhuravskaya]

Does anyone has the same error? 'Error: Unable to find `next-intl` locale, have you configured the middleware?'

[alexandrmeyer]

Your explanations are fantastic. Thank you. However, there is a slight issue. This video is just 7 months old, but so many things changed here since then. Please consider recording another video like this for the new functionality. Your teaching is great.

[zakidzz]

thank you for that, but what if i have large website and i want to import each dictionry per page how i this

example
when i m on index page>>only index.json (contain translation) will load

about.tsx -> about.json

will gain more clarity + some proformance as only nessisary translations wil load

second case:
how about translations that stays in most pages (not all) like header and footer lets say i have multiple ...how i translate them and include them

so it will be page translation+ layout

[theintegratorZ]

Great tutorial as always. Just a little question. What if I want to use next auth as well. How to write match config for different routes for different scenarios in next auth and intl middleware

[AndriyNosov]

A stable version of next-intl 3.0 was recently released with a lot of changes, maybe you would like to make a video tutorial of it?

[akhilkrishnanr]

Great tutorial.
How do you build the app if it has middlewares?

[sadique_x_]

guyyy, i love the way you pronounce hook

[agoskin]

Thank you! You have a wonderful English accent! The video was helpful!

[RainWong-ie]

nice turorial!!!! but how dose work output:"export" in next.config.js for static page?

[OutrospectiveOfficial]

Great tutorial, but how would you handle a scenario where you have to pass in a lot of translations to the client component? Let's say the client component is a form which has labels, error messages, placeholder texts etc. You'd get the translations inside the server component, map them manually into a object and then pass that object as translations to the client component?

[pragnyasahu]

Very well and simple explanation, and this vd is amazing . 😊

[ducnguyendinhtrung]

I need to pass the language selected to the Accept-Language of header in API.
What is the best practice to change language dependent content coming from APIs without page refresh and calling manually all the APIs?