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

In this video, you will learn how to use nextjs internationalization and translate your website content using next-i18next package.
Contacts
Email: [e-mail]
Linkedin: / thatanjan
portfolio: thatanjan.me/
Github: github.com/tha...
Instagram personal: / thatanjan
Twitter: / thatanjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: www.culescodin...
What is Client-Side Rendering?: www.culescodin...
What is Server Side Rendering?: www.culescodin...
Everything you need to know about tree data structure: www.culescodin...
13 reasons why you should use Nextjs: www.culescodin...
Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: • Setup Eslint Prettier ...
Everything you need to know about CSS in JS: • Everything you need to...
Toggle Dark mode with Material-UI: • Material-UI Basics Cou...
Build a real-time view counter: • Build a blog using #JA...
Build a small search engine with MongoDB: • Build a blog using #JA...
Playlists you might like:
Build a blog using JAMstack: • Build a blog using JAM...
Material-UI basics course: • Video
Quick tricks: • Access COOKIES in Next...
Crash course: • Redux toolkit crash co...
How-to videos: • Setup Eslint Prettier ...
Stay safe and good bye.

[@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

[@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.

[@IlkhomMaksadkulov]

Thank you. The tutorial was really helpful

[@CulesCoding]

Glad it was helpful!

[@loadszz]

Thank you very much! You're awesome!

[@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 ?

[@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.

[@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?

[@mhamadsafa7166]

Brilliant as always

[@CulesCoding]

Thanks

[@siamparvez44]

Thanks bro, I was looking for the same thing.

[@CulesCoding]

I am glad that it helped

[@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

[@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

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

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

[@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']))
}
}
}
```

[@GeneralDeD9963]

Thanks a lot bro)

[@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

[@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.

[@viping3189]

how can I translate dynamic content?

[@joehsndev]

A tutorial for you vim configuration?

[@returnZeroo]

Thanks bro

[@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.

[@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

[@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`.

[@cafefiftyfifty]

awesome

[@maykelariastorres58]

How to export in GitPage or Vercel

[@SAADKHAN-qh3bp]

how to translate with dynamic data?

[@CulesCoding]

You will need third party APIs for that

[@sabbir-holybangla1866]

Can I look up on your Linkedin profile?

[@CulesCoding]

sure

[@brahmharsh24]

Thanks, Which linux flavour you're using?

[@CulesCoding]

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

[@souvlaki42]

Good video but please fix the typo in the title.

[@CulesCoding]

Thank you so much.

[@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