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.
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.
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!
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! :)
Just started to exploring Next.js and found your channel with pretty useful videos like that :) thank you for that and subscribing of course !
3 роки тому+4
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 !
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 😁
@@jpomykala ttags has a cli that extracts translation files from code, which is pretty great. It supports plurals and contexts which is pretty great too. Globalize supports currencies, number formats, and genders as well as all strings. I’d love it if one of these libraries/vendors had some format guide, support, or storybook preview integration that helped guide translators/translations to successful outcomes by giving them the right contexts and the amount of space something could occupy to fiddle with. I mean, we’re writing responsive web apps and native apps with dynamic datasets and sometimes large bodies of text or small lists of menu items, but to the translators, it all looks like a tiny text input or a line item in a text file. It’s pretty tragic. In 2022, i was fully expecting we’d have click to edit/create translation inputs as a dev mode the apps run in where a translator can just type text directly onto the component/page in a something like storybook component previewer and know immediately if they were over the character limit of the space allowed. Nope. No flying cars for me. I signed up for a simplelocalize trial and i’m going to give it a runthrough. Localise and transifex are absurdly priced. Yours seems more reasonable. Still want better features though.
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?
Yes, this is possible! You would fetch the localized string in getStaticPaths and use a dynamic route. "When leveraging getStaticPaths, the configured locales are provided in the context parameter of the function under locales and the configured defaultLocale under defaultLocale." nextjs.org/docs/advanced-features/i18n-routing#accessing-the-locale-information
@@leerob I'm having a hard time really understanding how getStaticPaths and getStaticProps works. I'll try something with the link you've provided :) You saying it's possible helps already, I guess I need some more expossure and practice to the framework 👌
@@leerob but using this you would only have ONE 'controller', one place that would have to take care of every call to translated urls. Is there a way to keep the folder/file structure but the possibility to override/translate the folder name? For example if we have our file like this: - src/pages/cooking-recipe/{id}.js Url in french would be : - fr/recette-de-cuisine/{id}
I, too, am trying to figure out how to handle localized paths. Otherwise i18n doesn’t make complete sense to my non-English speaking users when sharing/visiting links directly.
Hi Lee. Great video! What do you think is the best library to use with next js now that routing is included natively? I tried i18next but as far as I can see it does not work really seamlessly.
There are a few different options for localizing. As you mentioned, routing support is built-in so no external library needed there. For example: github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta
Lee is it possible to make next.js Internationalization combined with Strapi Internationalization - I got pretty hard times to resolving that with SSG.
is this scalable ? i've seen many libs store the translation in the json files. why do we have to do that ? why don't just store it in js file as string? is it because of the bundle size?
This actually might be a very dumb question but it's been bugging me 😄 When you say the content is serverside rendered, does that mean the key-values you defined in en.js/fr.js files? For example, theTailwindcss page uses Nextjs and it's lightning fast. Is the documentation content being serverside rendered? Thanks!
What if I got dynamic data in English on GraphCMS and I'd like to display it in other language? I need to add another column in my GraphCMS Content System to my existing conent: Author, Blog and then apply a locale (for languages e.g. 'en' 'fr'), change the GraphQL API query and what next? That would be a good tutorial video about it :)
Unfortunaly if u want to create a static site (SSG) you could not use i18n. well, i dont know if exist other way to use i18n, but i18n doesnt support next export. " i18n support is not compatible with next export. (SSR - NextJS 10) "
@@leerob really mna??? Great, this is awesome. And work in the same way??? Like this: "deploy": "npm run clean && npm run build && next start -o dist/",
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.
Woah!! Amazing insight. Thank you for this,
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.
in next13 how you can access your files ? should I put all my folders inside app directory inside [lang] ?
Hi, did you use the Router from next/navigation ? cannot use next/router with Next.sj 13 :(
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!
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! :)
already liking bc of the pro tip at 0:15
Just started to exploring Next.js and found your channel with pretty useful videos like that :) thank you for that and subscribing of course !
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 !
Good clarification! This is called a "numeronym" :)
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 😁
Try SimpleLocalize for managing translations :)
@@jpomykala ttags has a cli that extracts translation files from code, which is pretty great. It supports plurals and contexts which is pretty great too.
Globalize supports currencies, number formats, and genders as well as all strings.
I’d love it if one of these libraries/vendors had some format guide, support, or storybook preview integration that helped guide translators/translations to successful outcomes by giving them the right contexts and the amount of space something could occupy to fiddle with. I mean, we’re writing responsive web apps and native apps with dynamic datasets and sometimes large bodies of text or small lists of menu items, but to the translators, it all looks like a tiny text input or a line item in a text file. It’s pretty tragic. In 2022, i was fully expecting we’d have click to edit/create translation inputs as a dev mode the apps run in where a translator can just type text directly onto the component/page in a something like storybook component previewer and know immediately if they were over the character limit of the space allowed. Nope. No flying cars for me.
I signed up for a simplelocalize trial and i’m going to give it a runthrough. Localise and transifex are absurdly priced. Yours seems more reasonable. Still want better features though.
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
This video is REALLY helpful. Helps me set up local restaurant's Greek and English web pages.
Hey, do you plan to make an updated version for the app router?
This guy videos are like the ultimate nextjs guide. Really nice and helpful content, keep it going!
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?
Yes, this is possible! You would fetch the localized string in getStaticPaths and use a dynamic route.
"When leveraging getStaticPaths, the configured locales are provided in the context parameter of the function under locales and the configured defaultLocale under defaultLocale."
nextjs.org/docs/advanced-features/i18n-routing#accessing-the-locale-information
@@leerob I'm having a hard time really understanding how getStaticPaths and getStaticProps works. I'll try something with the link you've provided :) You saying it's possible helps already, I guess I need some more expossure and practice to the framework 👌
@@Lucsy3012 More info on getStaticProps / getStaticPaths here ua-cam.com/video/eMwTEo6AjDc/v-deo.html
@@leerob but using this you would only have ONE 'controller', one place that would have to take care of every call to translated urls. Is there a way to keep the folder/file structure but the possibility to override/translate the folder name?
For example if we have our file like this:
- src/pages/cooking-recipe/{id}.js
Url in french would be :
- fr/recette-de-cuisine/{id}
I, too, am trying to figure out how to handle localized paths. Otherwise i18n doesn’t make complete sense to my non-English speaking users when sharing/visiting links directly.
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.
can u make updated veriosn of internationalization? with newer version of next-intl
Hi Lee. Great video! What do you think is the best library to use with next js now that routing is included natively? I tried i18next but as far as I can see it does not work really seamlessly.
There are a few different options for localizing. As you mentioned, routing support is built-in so no external library needed there.
For example: github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta
@@leerob thanks I'll check it out 👍
Excellent ! short but super informative
Nice video, thanks for sharing. Very helpful for my problem.
just love your content bro❤️
Great video. Can you tell me where you got your NextJS shirt?
Just what I need. Super helpful!
Hello Lee,
My Accept-Language header does exist, but it didn't work.
Do you know why?
Thanks for the short video
Hey Lee Robinsin, how can detect location and update the locale for other pages not only index? Thanks a lot. Im in trouble with that
Did you find a solution bro? Im stuck in this too localhost:8000/... works but localhost:8000/en/... does not
@@necmettinsargn667 no... :/ Didnt find something
Hi man thanks for the tutorial, is that possible render using some variable inside the translation?
Wonder if you could do Next JS localization with Headless WordPress and WPGraphQL and Polylang extenstion
Any full tutorial on this? I'm new to Next Js but really need to add localization.
Lee is it possible to make next.js Internationalization combined with Strapi Internationalization - I got pretty hard times to resolving that with SSG.
is this scalable ? i've seen many libs store the translation in the json files. why do we have to do that ? why don't just store it in js file as string? is it because of the bundle size?
now how would you redirect anything but en and fr to /en or /
this is wonderful content, I look forward new videos
in your example, will the client bundle include *all* translation strings, or just the ones for the currently active locale?
In my example, it would include both. A most realistic approach would be to use getStaticProps to fetch only the translation you need!
Whatta* crazy starting!? LOL!
This actually might be a very dumb question but it's been bugging me 😄
When you say the content is serverside rendered, does that mean the key-values you defined in en.js/fr.js files?
For example, theTailwindcss page uses Nextjs and it's lightning fast. Is the documentation content being serverside rendered?
Thanks!
This video will answer your question! ua-cam.com/video/eMwTEo6AjDc/v-deo.html
I bet it uses SSG, cause documentation is static, no need to user interaction.
Would like to see a more advanced video via domain based i18n :/
I'm wondering if there is a way to dynamically set the locales, so the client can choose their languages within a CMS
how do you do translations for errors generarted from the api
This is good stuff! Do you have more information on how to implement this for static pregenerated pages?
You helped me in a project. Thank you!
I hope me too🙈
How to handle that With client side get data from endpoint ?
how can we use translations wthout hook in a normal non functional ts file ?
thanks alot, this was very helpfull!
Awesome content, keep rocking
What if I got dynamic data in English on GraphCMS and I'd like to display it in other language? I need to add another column in my GraphCMS Content System to my existing conent: Author, Blog and then apply a locale (for languages e.g. 'en' 'fr'), change the GraphQL API query and what next? That would be a good tutorial video about it :)
how did you fix this
How can I get the language headers persisted even when I change the page?
Unfortunaly if u want to create a static site (SSG) you could not use i18n.
well, i dont know if exist other way to use i18n, but i18n doesnt support next export.
" i18n support is not compatible with next export. (SSR - NextJS 10) "
You can still use SSG with i18n, which is what I'm doing in this video!
You just need to use `next start` instead of `next export`.
@@leerob really mna??? Great, this is awesome.
And work in the same way???
Like this:
"deploy": "npm run clean && npm run build && next start -o dist/",
Or i need to do something more? config next.config or something?
My question is. Where can I get your shirt?
damn good!!!! more updated tutorials make more newcomers to learn and try out next.js!
wow finally managed to do it
what if i render languages from database ?
What's your theme in this video ?
Thanks,cool video)
Thanks a lot!
Could you talk about motion and transitions?
Is there a way to make the translate without change the path?
yes if you set different domains per language on your next.config.js
What's your theme ??
Sorcerer! leerob.io/uses
@@leerob Thanks!
Please update with layout and pages. App. :)
fuck! the best tutorial ever
Thank You
Great guy
NICE!!!!!!!!
thx bro
yeeah but if i have 20 languages i'd have to import them all -> this could hit hard the end user that doesn't need the 19 other languages.
You should use getStaticProps to fetch only the current language needed. This was just a simple example!
Interesting
Pls update chrome, its bothering me :D
jk, ty for the video.
6:43
How comes you do not talk about the slug translation? How to translate and redirect to the correct translated page?