Next.js Internationalization with next-i18next and Internationalized Routing (Full Walkthrough)

[@EmilyNilsen]

Absolutely, 100%, a fantastic tutorial! I was dreading adding the JSON files, and then you introduced i18nexus :)

[@danielbusetto6967]

The only good tutorial for i18n Ty man

[@ReddyIsMe]

This was awesome. You saved my day. Thank you !!!

[@sanjaykumar_kamble]

this is exactly wat i was looking for

[@Ne3zyTV]

best video on this thanks a lot ! btw if you're using typescript you still have to name next-i18next.config.js and not .ts or you'll get an error

[@irinsajan2870]

Really helpful. Thank you :)

[@27sosite73]

fantastic tutorial!

[@kozie928]

Very helpful, thanks :)

[@AbdurrahmanASUR]

thank you so much 😍😍🥰🥰😘😘😘😘😘😘❤❤❤❤❤❤

[@rauldeandrade]

Thanks. Really cool video and service. If I may suggest on your next video, either record with higher resolution or larger font size. KZbin compression makes the font hard to read

[@i18nexus]

Thanks for the feedback. It's definitely best to change the resolution here to 720p. But I agree, and will use a larger font size in future videos. Thanks!

[@anandhukraju8044]

Followed this tutorial. when I change the url on the browser the translation works but how to implement it on click of a button?

[@i18nexus]

Hi! If you want a language picker for your users, you can use the NEXT_LOCALE cookie. The NEXT_LOCALE cookie will overwrite the Accept-Language header that Next.js uses to determine the language to use. See here: nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie You can also simply add the "locale" attribute on any tag. For example, clicking will take you to the French version of the "/home" route. See here: nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales

[@maxjustmax521]

perfect and straight to the point thank you so much, too bad the resolution is too low though

[@shaikadilahmed4249]

Do I have to specify the serverSideTranslation function wherever I am translating the content ? In every page.....?

[@i18nexus]

Yes, you need to call serverSideTranslations on every page component in getStaticProps or getServerSideProps. You do not use it in nested components in a page. Only in each top level page component.

[@shaikadilahmed4249]

@@i18nexus Thanks for your reply

[@denissantiago5748]

muy agradecido por el tutorial

[@moammerkhalil6096]

I can't load locales from the public folder. it only works when I place locales in the root directory. is there a way to achieve that?

[@Samruddhi_Chavan_20]

Thankuhh sir fr the vdo ... But I m facing some issue... When I m using it in another js file it's giving me error of Module not found: Can't resolve 'fs'... Plz do look into this. Thankuhh

[@BrunoHBM23]

Amazing tutorial, thank you very much

[@karnajitmandal142]

Will I have to mention this getStaticProps function in all of my pages ?

[@i18nexus]

You can either use getStaticProps or getServerSideProps. But yes, one of these must be included on all your page level components. All the sub-components on these pages will have access to the translations automatically just using the useTranslation hook

[@nimanekouei6041]

thanks man

[@sabokhat-dev]

I had an error telling i18nexus: command not found. Npm error even if I added i18nexus-cli globally, it installed, then it said no i18nexus command

[@i18nexus]

Hi there, we would love to help get you set up. Please contact us through the chat bubble on our website, or email our support.Thanks!

[@akinloludavid3]

This is absolutely amazing

[@naelektrisanje]

Hey, I need some help. The app is always running EN as a default language, has anyone had the same bug?

[@excalibur2417]

I have an issue, it seems as if for some reason when I use pull it exports a default.json and not common.js I keep on running into this error: Error: Default namespace not found at public\locales\de\common.json Any fix?

[@i18nexus]

next-i18next requires you to have a default namespace (set with the defaultNS config property). By default, next-i18next sets defaultNS to "common". If you don't have a namespace named "common", you will receive an error. So you should add a namespace named "common" to your i18nexus project as I did in the video, or you should change "defaultNS" config property to a namespace that does exist in your project.

[@saikarthik6394]

how do you use this in another page where there's already a getServerSideProps defined for an API call? Getting the following error: thread '' panicked at 'You can not use getStaticProps or getStaticPaths with getServerSideProps.

[@i18nexus]

You can use getServerSideProps or getStaticProps with next-i18next. I am just using getStaticProps in this example. So if you're already using getServerSideProps, you can do the same thing as I did in getStaticProps there.

[@amitbanerjee9516]

First of all thanks a lot for this great tutorial. It helps to understand the flow end to end. Good work, please keep it up. One request, do you have any example where you have used serversideprops instead of getStatisProps.

[@oguzhanbay5339]

How can i use this components ? There is no getStaticProps or GetServerSideProps

[@i18nexus]

If you use i18next's serverSideProps at the page level, all sub-components inside the page will be able to use the useTranslation hook.

[@ТёмаКоролёв-к6ф]

Это хороший туториал, но вы знаете как получить instance next-i18next за пределами компонента? Ведь есть много задач, когда нужно получить перевод в функций какого либо модуля вне компонента.

[@i18nexus]

Contact us in our in-app chat, and we can help!

[@criszamarco2186]

Awesome!! thanks a lot!

[@hypealex]

Do you have a sample in typescript?

[@MailarYT]

what ide is this?

[@faisalakram5555]

the t function returning string as its own parameter.....

[@fadilnatakusumah195]

can we get the source code for this?

[@creatorsremose]

reading code in 720p was rough, man...

[@albinsjolin649]

King

[@jrs_devs]

Everything was good until I saw that after 500 strings it's more than $14/month. Really expensive.

[@i18nexus]

The i18nexus app allows for up to 500 strings for free. This is usually enough for personal projects and websites. But yes, after 500 strings, pricing starts at $14/mo. Just to be clear, i18nexus isn't required to use next-i18next. It is an optional service you can use along with i18next if you want to automatically Google Translate your strings and more easily manage your translations. But we appreciate your feedback! :)

[@b1chler]

you can use lingui.js which has imho a better develoer experience and crowdin which is free for one private project.

[@jrs_devs]

@@b1chler for the moment I'm using next-intl and creating the files manually for my personal project. Anyway, it's good to know that these collaborative apps exist just in case I need to use them in the future.

[@RonaldJayBuayan]

good thing i saw your comment before i even started using it.