I was working on a new project that needed internationalization, been working with next for a few months now but decided to give up and just use react, the whole process feels ALOT smoother and less headache
Yes it’s a good Ida to learn first react and get into Next js later, some say Next.js is easier but thats not fully true, maybe I do a comparison Video about that ;)
@@tobitacklestech nono, I've been using both for about two years now, it's just that internationalization is way easier and well documented on react compared to next, hope they do something about that soon
fucking love you dude. i have to present a web TOMORROW, and i thougt translation was easy, now im facing a long nigth literally writing t everywhere in like 40 or 50 components. haha fun.
Great tutorial! I was able to easily translate all the static content in my app, but I've been struggling to find a way to translate dynamic content that comes from API responses. Is there any method or best practice for translating dynamic content fetched from an API?
@@jaydippatel83 not really, if the api you Talk to only supports english then maybe you could use another translate Service but this takes Time and time is never user friendly, if you selve Host the api you could copy it’s values to different languages and use them with the e.g. useLocale Hook
If you’re using a CMS, most of the decent ones will allow you to localise the languages. I’d assume you could then just get the current path, extract the local and then pass it into your fetch
I got the error that says: Missing required html tags The following tags are missing in the Root Layout: , . After i edited the main layout, like in the video. Should i move the NextIntlClientProvider component inside the html ? Or what else can i do ?
Maybe in new version all these things works a little bit different. I got many issues after doing everinthing like in the video. At the moment, it's better to check how to do it all in the official documentation for next-intl. It's really simple. At least, your advice with localeSwitcher, and the link to this language switcher example helped me, and the advice about async functions. Thank you for the video!
@@tobitacklestech Perhaps you know how to solve this problem: How can I correctly merge two useRouter hooks in my Next.js project? I’m using one useRouter from next-nprogress-bar for the loading indicator, and another from next-intl/navigation for locale handling. I want to combine their functionalities, so that when I use methods like push, the locale is added to the path and the loading indicator is displayed at the same time, without duplicating the method calls. Is there a best practice for combining them without repeating method calls?
The smooth transitions in the video are amazing! Loved it much!! 🔥🔥🔥
Thank you 🙌
thank youu for async function !!!
Of course!!
Nice, very well explained, thank you.
appreciate that thank you ♥️
I was working on a new project that needed internationalization, been working with next for a few months now but decided to give up and just use react, the whole process feels ALOT smoother and less headache
Yes it’s a good Ida to learn first react and get into Next js later, some say Next.js is easier but thats not fully true, maybe I do a comparison Video about that ;)
@@tobitacklestech nono, I've been using both for about two years now, it's just that internationalization is way easier and well documented on react compared to next, hope they do something about that soon
ahh i understand, yee the documentation could be better, you are right
Adding tolgee with their chrome extension your experience raises even one level higher 🚀
Yessss
awesome possum explained simply and directly
Nice explanation and helpful content, keep going
@@sidiqcumar5386 thanks man 🙌🏼
fucking love you dude. i have to present a web TOMORROW, and i thougt translation was easy, now im facing a long nigth literally writing t everywhere in like 40 or 50 components. haha fun.
I wish you the best!!
Great tutorial! I was able to easily translate all the static content in my app, but I've been struggling to find a way to translate dynamic content that comes from API responses. Is there any method or best practice for translating dynamic content fetched from an API?
@@jaydippatel83 not really, if the api you Talk to only supports english then maybe you could use another translate Service but this takes Time and time is never user friendly, if you selve Host the api you could copy it’s values to different languages and use them with the e.g. useLocale Hook
what about if our text data come from api fetch them and how translate it?
If you’re using a CMS, most of the decent ones will allow you to localise the languages. I’d assume you could then just get the current path, extract the local and then pass it into your fetch
Amazing 🔥🔥
I got the error that says:
Missing required html tags
The following tags are missing in the Root Layout: , . After i edited the main layout, like in the video. Should i move the NextIntlClientProvider component inside the html ? Or what else can i do ?
Maybe in new version all these things works a little bit different. I got many issues after doing everinthing like in the video. At the moment, it's better to check how to do it all in the official documentation for next-intl. It's really simple. At least, your advice with localeSwitcher, and the link to this language switcher example helped me, and the advice about async functions. Thank you for the video!
Will this approach work well in the context of SEO (indexing)? I mean when using client-side hooks. And very well explained, thank you
It should, but read into the docs to be safe because I don’t looked into SEO with internationalization
@@tobitacklestech Perhaps you know how to solve this problem: How can I correctly merge two useRouter hooks in my Next.js project? I’m using one useRouter from next-nprogress-bar for the loading indicator, and another from next-intl/navigation for locale handling. I want to combine their functionalities, so that when I use methods like push, the locale is added to the path and the loading indicator is displayed at the same time, without duplicating the method calls. Is there a best practice for combining them without repeating method calls?
usage of next-intl in server components currently opts into dynamic rendering, getting this error while deploying
Can you show the error you’re getting?
awesome
thank you
You're welcome
what if i got many client sub components ? passing the t object all the way long?
@@libergong1172 you could use something like context apis e.g. Zustand
good job
Thanks
Niceeeee
very cool
keep going
I will ✌️
how to combine this middleware with auth.js middleware?
They should work together I have a project called bitz at my GitHub where U can find an example
How to export build after Internationalization (i18n)?
Just npm run Build I guess, what is the issue you are getting?
how do i change the language now
@@DulguunTanusoft By changing the Prefix to the Language you want for example de or en
Can someone give me the name of the font family in this editor vscode
@@StrangeBird-m6x this is fira code ;)
@@tobitacklestech thank you so much❤
sadly not working in next 15 😥
:((