It can't be this easy to add URL internationalization in Remix??

It can't be this easy to add URL internationalization in Remix?? | Remix Done Right part 4

Рет қаралды 987

Күн бұрын

Welcome back to the "Remix Done Right" series! In this episode, we'll delve even deeper into the world of internationalization (i18n) in Remix Vite projects.
Join me as I show you how to seamlessly integrate i18n localization using URL segments.
🛠️ What You'll Learn in Part 4:
Custom routing configurations: Learn how to use remix routing conventions to your adventage and to leverage it to create custom urls
Language Switcher: Implement a language switcher to redirect users to the correct language URL.
Hydration avoidance: Learn how to avoid hydration mismatches with the translations in different urls by using smart url detection.
🚀 Get Ready to Remix:
Follow along and code with me as we lay the foundation for a globally accessible Remix e-commerce application with robust internationalization support.
Whether you're new or a seasoned developer, this tutorial is designed to be beginner-friendly yet packed with advanced insights.
🔗 Resources and Links:
GitHub Repo: github.com/AlemTuzlak/remix-e...
Remix Documentation: remix.run/docs/en/main
remix-custom-routes: github.com/jacobparis-insider...
👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together.
📌 Stay Connected:
Twitter: / alemtuzlak59192
GitHub: github.com/AlemTuzlak
⏱️ Timestamps:
00:00 - Intro
01:00 - Adding remix-custom-routes
01:32 - Creating our custom route convention
04:28 - Adding our lang to the url
05:16 - Extending our remix configuration
06:00 - Adding language switching to root.tsx
07:44 - First demo with the url
08:07 - Adding language detection to avoid hydration mismatches
11:40 - Demo with no hydration issues
13:00 - Finishing up by adding a Language Switcher component
14:46 - Final demo
🔖 Tags:
Remix framework, Vite, Remix Vite, internationalization, i18n, web development, frontend development, Remix tutorial, coding tutorial, i18n tutorial, Remix Vite tutorial, web app localization, i18n setup, language switcher, translating content, developer tools, open source, coding community.

Пікірлер: 18

@ThomKnepper 4 ай бұрын

Brilliant video!

@alemtuzlak 4 ай бұрын

Thank you so much!

@user-lt8fj8ef9n 4 ай бұрын

Awesome! What do you plan to do in the next video?

@alemtuzlak 4 ай бұрын

Thank you, probably adding shadcn ui and styling the page a bit

@adiadiadi 4 ай бұрын

Awesome vid!! I use remix-custom-routes but I did not know you could do what you just did!! Is it possible to use remix-custom-routes along with the flat-routes package?

@alemtuzlak 4 ай бұрын

Thank you!! Really appreciated, I think you should be able to, wrapping the return value of custom routes with the flat routes should be enough probably, but I haven't really tried it.

@aaronkoivunen 4 ай бұрын

Can't get it to work with flat-routes. Would really appreciate if someone has an example of how to combine flate-routes with custom-routes. Cheers!

@alemtuzlak 4 ай бұрын

@@aaronkoivunen after talking to Jacob custom routes supports the + convention for folders out of the box, do you really need to combine them?

@laurelaurel 2 ай бұрын

Are you not concerned about quite low weekly downloads on this package? It might be not really well supported. Including risky packages into the code might lead to broken app in the future. Is there any other way to add those url's? Feels like there has to be, hmm.

@alemtuzlak 2 ай бұрын

Not really, it was made by Jacob Paris who is a prominent member of the remix community. Plus the remix core team asked him to create a PR to bring the functionality into remix itself. You can obviously copy paste the code from the package and do it like that as well

@laurelaurel 2 ай бұрын

@@alemtuzlak Oh okay, that's interesting. Thanks, I think I will give it a try then.

@lucidsimmer 4 ай бұрын

Is it possible to make this work with v1-route-convention?

@alemtuzlak 4 ай бұрын

This package allows you to create whatever routing convention you want so yes it's possible, you could even create routes outside of routes folder and use this to find them.