Internationalization (i18n) with Next.js!

0:00 – Introduction
0:46 – Routing + Localization
1:04 – Example Site We're Rebuilding (Before)
3:07 – Enable Multiple Languages with Subpath Routing
4:34 – HTTP Accept-Language Header
5:29 – Localizing Content
6:56 – Routing to Other Languages
8:57 – Conclusion

Links
–––––

–––––

[mikllhor]

Nice video! The loading animation is a animation of the actual Hadron colliders in Cern as they are two rings in which the particles travel before they collide for the experiment purposes.

[sejeminecraft]

Finally! Thank you so much! You have no idea on how annoying it was to get this working with all other tutorials, where they want you to install annoying packages and waste your time. Your video was straight to the point and worked exactly as expected. As of note, this works in Next.JS 13 without any problems.

[gorank]

This is still the simplest way to do internationalization with i18n. Clear tutorial without a bunch of packages and errors. Good job, you got a new subscriber! :)

[joephus]

Many months later, still helping people out. Tried next-i18next and it just wasn't working for my purposes. This vid is all I needed, hats of to you for helping us out with some native localization!

[floubiceps]

already liking bc of the pro tip at 0:15

[kazi]

Just started to exploring Next.js and found your channel with pretty useful videos like that :) thank you for that and subscribing of course !

[anargyrosstylidis]

This video is REALLY helpful. Helps me set up local restaurant's Greek and English web pages.

[noor_codes]

Lee was sooo fun in this video. love it

[brattonross]

Perfect timing, I'm just getting stuck into my first real Next.js app and it needs i18n support! I'm so glad I discovered your channel Lee, I'm about to go binge watch your React 2025 series now 😁

[のざじ-ke]

Thank you very much, I'm search this tutorial 2 hours stil not working, after see this video it work.

Thank you Lee ❤‍🔥.
auto subs

[luis_soul]

This guy videos are like the ultimate nextjs guide. Really nice and helpful content, keep it going!

Hi dude.

I love your videos and I learned a ton from you, thanks! Small clarification tho — 18 stands for number of letteres between "i" and "n" and not a total number of letters in "internationalization". Same like people use "a11y" for "accessibility", there is 11 characters between "a" and "y".

Thanks and keep on making awesome content !

[nathankrasney]

Excellent ! short but super informative

[helmianto]

Nice video, thanks for sharing. Very helpful for my problem.

[MatthiasFloimayr-sp]

ATTENTION! This video is obsolete for most cases. After trying for 3+ hours, I found out that Next.js 13+ (with the app directory) doesn't fully support the i18n routing behavior anymore. Instead, Next.js 13+ encourages custom implementations of i18n. Better go for next-intl instead.

[davidk]

Hey, do you plan to make an updated version for the app router?

[TinoReyna]

It's not complicated to set the locales as I thought. And it's way much better than using an external library, it doesn't affect the web site load.

[lucasmdev]

You helped me in a project. Thank you!

[flashtrcom]

this is wonderful content, I look forward new videos

[Lucsy]

Thanks for the tutorial! Just looked this topic up today!
Do you know if there's an easy way, possibly built-in function, to translate the routes in /pages? Like if I have a "/contact" route I would want to create a "/fr/le-contact" route instead of a "/fr/contact"? The whole /pages/file.js equals the route is seriously amazing and I love that feature but as I'm being used to german websites it would be really weird if the site just switch the locale and not translate the URL itself. I searched the documentation, Github and Stackoverflow today and mostly only found complex systems so I think it's generally not easy to do because it opposed the neat routing system Next.js is giving us. But maybe you have an idea?