Next.js + Strapi -
In this episode we are going to take look at new internationalization features of both #Strapi and #Nextjs.
As you may remember I already did an episode about localization and internationalization, but at the time of recording that video Strapi didn’t have options for translating content. So we had to create additional fields in our content type that would serve as translations for original fields.
This is an OK solution if you only have 1 additional language, but imagine that you wanna translate your site or app to five languages. That would mean that you would have 5 additional fields for every translatable field.
Not an elegant solution by any stretch.
But with version 3.6 of Strapi you get translation options out of the box. And to make things even better Next.js also got Internationalized Routing in version 10.
So in this episode we are going to take a look at how these two features play together.
Scroll Icon by www.flaticon.com/authors/pros... from www.flaticon.com/
Code used in this tutorial
bit.ly/3g6cmna
----------------------------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here: bit.ly/3qdjIc5
------------------------------------------------------------------------------------------------
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/ivandoric
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials
Пікірлер: 26
Thanks for the explanation 🙂 this gave me ideas for my current NextJS app. I like how humble your channel name is 😉
@WatchandLearnTutorials
2 жыл бұрын
Hehe 😀
Such a great video 🙌🏻
@WatchandLearnTutorials
3 жыл бұрын
Thanks man 😀
great video and thank you ! what if you use use appWithTranslation from next-i18next. This higher-order component (HOC) will wrap a i18nextProvider around your app ?
Thank You ❤
Hope to see more WordPress content in your channel. Your content is great! Thank you for that.
@WatchandLearnTutorials
3 жыл бұрын
There will be some WP content from time to time, but mostly around WP REST API. Thanks for watching 😀
Pretty good content, thanks.
@WatchandLearnTutorials
2 жыл бұрын
Thank you for watching 😀
it's helpfull. thanks for sharing
@WatchandLearnTutorials
2 жыл бұрын
No problem 😀
thanks for everything
@WatchandLearnTutorials
3 жыл бұрын
No problem 😀 thanks for watching.
Waw thank you so much Do you have any idea how to import css files conditioally?? I'm working on multi languages app and one of the languages is arabic so i have another css file to load when the dir is rtl i mean when the language is arabic so i was looking for a way to handle this issue but i couldnt find it
@WatchandLearnTutorials
3 жыл бұрын
If you are using CSS in JS then you could probably just pass current language code to your css and set the CSS direction property like that where needed. And if not, you can maybe set a global CSS class, something like .rtl { direction: rtl } and then conditionally call that class on your elements when the language is Arabic for example. This is just of top of my head.
@mooder3247
3 жыл бұрын
@@WatchandLearnTutorials oh thank you so much for replying on me well i already figured it out but i dont know if what i did is correct or not i created component and added tags for my css files including the rtl.css file and i added the conditon inside the jsx like so {locale == "ar" && ( )} so what do you think about that is it good to use it in this way ?
@WatchandLearnTutorials
3 жыл бұрын
@@mooder3247 This is a very elegant solution, good job 😀 . And if it works I would say there is nothing wrong with it.
Thanks for this tutorial! I'm wondering if you know how to do this with slugs (and no ID's). Like : /articles/[slug] And the routes automatically changes when you switch the language ? Thanks again
How satisfied are you with strapi vs other alternatives you might have compared it to? Love from Berlin (looking into this for Eng - German Content)
@WatchandLearnTutorials
3 жыл бұрын
Well, it's ok, but as I mentioned in the video there are things missing that would make it even better. The only other similar CMS I tried was Directus 9, and I must say it seems to me that it's better than Strapi, however I haven't tested it yet in real world situations.
Good video, but how change "id" when change lang?
@WatchandLearnTutorials
2 жыл бұрын
ID of what exactly?
Do you have a tutorial for Vuejs?
@WatchandLearnTutorials
Жыл бұрын
Nope.
use ?populate=localizations