Translate website content using Next.js internationalization and next-i18next

[@jaroslavgrejtak2484]

I saw a lot of tutorials during the last days but I have to say that this is the best, straight-forward and functional tutorial. Thank you very much!

[@stepakitov4556]

Best explanation I've ever seen. Thank you very much

[@CulesCoding]

Thank you so much

[@monirhrabby]

Thanks for sharing knowledge with us. Keep it up. I got this video helpfull.🚀

[@reality_today]

Amazing, clear to the point

[@IlkhomMaksadkulov]

Thank you. The tutorial was really helpful

[@CulesCoding]

Glad it was helpful!

[@antobine]

Great tutorial! Thanks🎉

[@johnifemezuo2641]

Thanks man. very helpful. Although i would like to know how to change the entire content of a page to a selected language.

[@PrinceSodhi]

I have a question, what happens when you are on the /bn/about page and refresh it. Does locale fallback to en or bn? also, does it work when you disable the javascript on the browser? I am trying to achieve to render the translation with SSR (nextjs) and keep the locale on page refresh. Do you have any video or repo?
Thank you in advance.

[@avinskatirza7009]

if we refresh the page the locale stays on the previous state before it was refreshed. as for your second question maybe you can refer to the next-i18n docs on the 'next export section'. hope this helps

[@nikitavakula5778]

@@avinskatirza7009 when we just refresh the page, the locale is saved. but what if we close the page and then open it again? the site usually opens with the locale that next-i18next has defined by default. how can we fix the locale for the site?

[@loadszz]

Thank you very much! You're awesome!

[@siamparvez44]

Thanks bro, I was looking for the same thing.

[@CulesCoding]

I am glad that it helped

[@alekz888]

Unfortunately, this way not working for new Nextjs13 if using the /app directory routing

[@CulesCoding]

Thanks for mentioning it. The /app directory routing is still on beta. But the principles should be same.

[@saulandre274]

Hey bro. This video is helping me so much. But this is not working on dynamic route pages. Do you have a working example for dynamic route pages with translation ?

[@СашоИванов-л3ц]

next-i18next doesn't support export command so what is the point of all of that?

[@kevin_3301]

Thanks for tutorial. But I got a question. I got a 'fs' error?
And I have to install 'react-i18next' plus i18next libs too. But in your video, only next-i18next

[@CulesCoding]

Not sure why you are facing this issue?
Maybe you should try look into stackoverflow or github issues.

[@leonardo-leite-meira]

me too 😒

[@leonardo-leite-meira]

you can use the useTranslation hook on any layout components as long as you call the serverSideTranslation function on getStaticProps/getServerSide (depends on your case) on every page.
By: @Avinska Tirza

[@ing3189]

how can I translate dynamic content?

[@edwinchan8190]

Thanks for the video, is the translation content lazy-loaded? If locale is en, I only want en content to be loaded, thanks

[@CulesCoding]

I am not sure about this

[@ProtesterBD]

Awesome tutorial bro. But I have a question. How can I use nested JSON objects?

[@CulesCoding]

Why would you need to use nested json objects for translation data?

[@timndichu]

@@CulesCoding maybe to categorize for different pages and components

[@CulesCoding]

@@timndichu use seperate namespace

[@brahmharsh24]

Thanks, Which linux flavour you're using?

[@CulesCoding]

I was using manjaro in that video. However I have now switched to ArcoLinux

[@ajanclose]

is there any way to ge rid of calling files that are used in the whole website, in the code below i will use 'common' and 'ui' file everywhere, is there any way to make them always available and only have to call 'home' or 'about' page in their file
```
export const getStaticProps: GetStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale as string, ['ui', 'common', 'dashboard']))
}
}
}
```

[@sanvirahmed]

Hey, thank you for this awesome video. But I got stuck on this error that says 'Module not found: Can't resolve 'fs''
I did everything as you did

[@CulesCoding]

Probably you are trying to use server side module on client. I would recommend checking the issues on GitHub

[@nikhilev3840]

I have a NextJS app. When I navigate away from a page and return to the same again I see the xxx.json file is requested and loading again in network tab. Is that natural?

[@CulesCoding]

I guess yes.

[@joehsndev]

A tutorial for you vim configuration?

[@oguzhanbay5339]

How can i use with only Component for example layout or navbar ? I can't serverSide rendering ? When I Try to const { t } = useTranslation('common') didn't work. Onyl works serverside why ?

[@CulesCoding]

Sorry for the late reply. I don't understand the problem you are facing. Are you facing problem with `getServerSideProps ` or something else?

[@mehedi_mosharrof]

I have the same question. How to use it in the non page components?

[@avinskatirza7009]

@@mehedi_mosharrof you can use the useTranslation hook on any layout components as long as you call the serverSideTranslation function on getStaticProps/getServerSide (depends on your case) on every page.

[@SAADKHAN-qh3bp]

how to translate with dynamic data?

[@CulesCoding]

You will need third party APIs for that

[@maykelariastorres58]

How to export in GitPage or Vercel

[@sabbir-holybangla1866]

Can I look up on your Linkedin profile?

[@CulesCoding]

sure

[@mhamadsafa7166]

Brilliant as always

[@CulesCoding]

Thanks

[@zilant07]

Hi i have this error i18n support is not compatible with next export and don`t find a solution

[@CulesCoding]

Sorry, I haven't used it with `next export`.

[@anuragsingh506]

good video but how i translate the data coming from database
or API

[@CulesCoding]

In that case you will need to use third party services like google translate

[@souvlaki42]

Good video but please fix the typo in the title.

[@CulesCoding]

Thank you so much.

[@returnZeroo]

Thanks bro

[@GeneralDeD9963]

Thanks a lot bro)

[@cafefiftyfifty]

awesome