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

Рет қаралды 41,369

Жыл бұрын

In this video, you will learn how to use nextjs internationalization and translate your website content using next-i18next package.
Contacts
Email: thatanjan@gmail.com
Linkedin: / thatanjan
portfolio: thatanjan.me/
Github: github.com/thatAnjan/
Instagram personal: / thatanjan
Twitter: / thatanjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: www.culescoding.space/blog/se...
What is Client-Side Rendering?: www.culescoding.space/blog/wh...
What is Server Side Rendering?: www.culescoding.space/blog/wh...
Everything you need to know about tree data structure: www.culescoding.space/blog/ev...
13 reasons why you should use Nextjs: www.culescoding.space/blog/13...
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.

Пікірлер: 58

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

@reality_today 18 күн бұрын

Amazing, clear to the point

@stepakitov4556 Жыл бұрын

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

@CulesCoding Жыл бұрын

Thank you so much

@antobine Жыл бұрын

Great tutorial! Thanks🎉

@monirhrabby Жыл бұрын

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

@loadszz 8 ай бұрын

Thank you very much! You're awesome!

@mhamadsafa7166 Жыл бұрын

Brilliant as always

@CulesCoding Жыл бұрын

Thanks

@siamparvez44 Жыл бұрын

Thanks bro, I was looking for the same thing.

@CulesCoding Жыл бұрын

I am glad that it helped

@user-bf8hi1ev7m 7 ай бұрын

Thank you. The tutorial was really helpful

@CulesCoding 7 ай бұрын

Glad it was helpful!

@johnifemezuo2641 6 ай бұрын

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

@GeneralDeD9963 Жыл бұрын

Thanks a lot bro)

@saulandre274 5 ай бұрын

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 ?

@returnZeroo Жыл бұрын

Thanks bro

@user-yz6hr5wd9e Жыл бұрын

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

@maykelariastorres58 Жыл бұрын

How to export in GitPage or Vercel

@cafefiftyfifty Жыл бұрын

awesome

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

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

@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 10 ай бұрын

@@CulesCoding maybe to categorize for different pages and components

@CulesCoding 10 ай бұрын

@@timndichu use seperate namespace

@viping3189 5 ай бұрын

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

@digitalliteracykh Жыл бұрын

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

@joehsndev Жыл бұрын

A tutorial for you vim configuration?

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

@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

@brahmharsh24 Жыл бұрын

Thanks, Which linux flavour you're using?

@CulesCoding Жыл бұрын

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

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

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