Introduction to Next.js 10's Internationalized (i18n) Routing

[@AryanLokar]

You are really clear and easy to understand, thank you

[@leighhalliday]

Thank you Aryan!! :)

[@Badadodadoop]

Dude, your videos are awesome. Learning so much from them. Thank you!

[@leighhalliday]

Bless you! Glad you enjoy them!

[@ferrad1]

I made This video request a few weeks ago on This channel wow Thank you for coming through Very helpful video!

[@leighhalliday]

I got you, fam!

[@igor_cojocaru]

Thank you Leigh! Very useful

[@leighhalliday]

You're very welcome, Igor!

[@cience]

I have been meaning to learn Next.js, thank you so much for this!

[@leighhalliday]

You're welcome! Next.js is pretty awesome, you won't regret it!

[@Sindoku]

Thanks Leigh!!

[@leighhalliday]

Glad it helped!

[@Sindoku]

@@leighhalliday Yessir, me too :). It was the first time I properly did i18n in an application.

[@kunglane]

Great Tutorial thanks! I already implemented React Intl for our hardcoded strings and it works just great👏

[@leighhalliday]

Thank you!! :) Glad you enjoyed it!

[@kunglane]

@@leighhalliday if I want to use variables inside of strings, how could I accomplish that with react-intl?

[@denisaugsburger2693]

Thanks a lot for the tutorial! It's less painful to maintain if you extract the messages from your components and omit the ID (FormatJS CLI). Then you can translate the JSON file(s) directly with the Simpleen cli :) Even add a watcher to constantly keep them in sync

[@leighhalliday]

That's awesome, thanks for the tip Denis!

[@abessesmahi4888]

Awesome ! Thank you so much sir.

[@leighhalliday]

Thank you Abesse!!

[@jaany]

Thanks for the great video!

[@leighhalliday]

Thank you Jan!!

[@seanaguinaga]

What is showing what components are re-rendering?

[@SakaryaRehberimcom]

Awesome

[@yigitruzgaruzun7289]

Incredibly beautiful man : Leigh Halliday

[@leighhalliday]

Haha these are the comments I can get behind :)

[@maykelesser]

My locale is coming undefined from my console. What can i do?

[@moeraad]

how to store my local in localstorage if i'm setting it in _document.js ? since this page renders on the server !

[@leighhalliday]

Maybe do the same thing in your _app.js component

[@mooder3247]

What if i wanted to grab the language data from api how i can achieve that ? Should i use getServersideprops on every page so when the user change the local it fetches the data in the language that he chose ? Or there is another way ?

[@Sindoku]

How do you get rid of the "Missing message: "p" for locale "en", using id as fallback." message in the console?

[@leighhalliday]

I'm not sure off the top of my head... sorry!

[@Sindoku]

@@leighhalliday all good, it was just a warning anyway

[@Sindoku]

The actual code worked as intended which is what matters I suppose

[@saimirkapaj255]

Thanks for the video Leigh. FYI the i18n support is not compatible with the next export.

[@leighhalliday]

Ahh good to know! That's something I haven't used before!

[@yotewachirapornpongsa7605]

I've got not found page when call on production {host}/{local}/xxx but it's work on local

[@VincentFulco]

Thank you.

[@leighhalliday]

You're welcome, Vincent! Thanks for the support!

[@syz3981]

is there any way to do this with next but without showing the lang in the actual path?

[@leighhalliday]

You can also do it by having different domains for different languages... leighfrench.com vs leighspanish.com, in which case it won't be in the path.

[@syz3981]

@@leighhalliday hmm so theres no way of doing it in some sort of state internally and avoiding the url completely ?

[@viktornikulin2863]

Thanks for the review, appreciate it! I tried to work with this feature, but it seems right now it is not compatable with Next's static html export. As I understood, it needs to generate internationalized versions of each page in order to be hosted at CDN. I wonder if there is a workaround, thanks for the review

[@leighhalliday]

Ahhh bummer... yea, I think it would have to generate one page per locale.

[@ordinarynetizen]

What VS Code theme are you using?

[@leighhalliday]

One Monokai

[@trustlang_ua]

I live in Ukraine. We have many Russian lang web sites. But from today we must use as defaults Ukrainian lang. Also, we use English lang, so we have 3 langs on our sites. This tutorial is very nice and clean.

[@leighhalliday]

Wow, and I thought it was tough in Canada with 2 languages! Thank you Vlad :)

[@avneet12284]

Great content as usual. Perhaps it could be possible to keep the content in various languages in a CMS like sanity or something. That would make it easier to work with.

[@leighhalliday]

This isn't something I've done before, but honestly sounds like an amazing idea.

[@gablabelle]

If you have a big app with lots of text and lots of supported locales, you'll also need to think about a strategy to scope/namespace and split these language files into chunks that are loaded only when necessary. I think next-translate can help you achieve that. It only loads the necessary translations (for current page and locale). I'm about to test it at work in a lerna monorepo with lots of packages and locales. Any other suggestions are welcome! Cheers from Montreal. ;-)

[@leighhalliday]

Hey Gab! Honestly this is something I haven't had to deal with before... the i18n pages I've done have been relatively small. But what you said makes a ton of sense! Split them up on a per page basis.

[@_maksime]

{fr: Merci, en: Thanks}

[@leighhalliday]

{fr: "De rien!", en: "You're welcome!"} :D

[@marc-andrequintal570]

works well with flatten object, but not with nested object :s