Localise React Applications Using I18Next
ฝัง
- เผยแพร่เมื่อ 20 มิ.ย. 2020
- 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
How to localise React applications using React i18next.
#i18n #localise
Code: github.com/satansdeer/react-i18n
Discord: / discord
Free React Testing Checklist: eepurl.com/c_8tzP
![[TH] G2 vs PRX | EDG vs FUT - VALORANT Champions 2024 DAY 4](http://i.ytimg.com/vi/Bkr_qM7dIaM/mqdefault.jpg)
![[ไฮไลต์] แบดมินตันชาย SHI Yu Qi (จีน) vs วิว กุลวุฒิ (ไทย) รอบ 8 คน | โอลิมปิก 2024](http://i.ytimg.com/vi/f7z7taforOM/mqdefault.jpg)
Eventhough you don't have milions of views, you still make better content than other dev channels :) keep it up bro!
Thanks man!
No messing around, love it. Thank you.
Awesome, no bullshitting, straight to the topic! You're the man :) Greetings from Poland
Thanks 😊
straight to the point , thank you !
До вашего видео не мог реализовать данную функцию без костылей, а по документации не разобрался в силу неопытности. Спасибо
Any chance for an ETA on that Backend example? I just can't figure out what this backend plugin wants, what should be returned by the endpoint, etc.
Simple and to the point. Thanks a lot.
Thank you for this knowledge :)
Hi @Maksim , Is there a way we can code split the language files and only add those keys to the main json which is required on the screen instead of loading all the keys in a json file. can we lazy load these?
Nice and concise Maksim. good share man!
Help please: I can't figure out how to use this with local translation.json files. Client side only. Backened only tries http requests and I'm not sure how to configure a local path (/public/locales/trasnlations.json). It works when I use "npm start" but not if I run "npm run build".
I'm new here , actually i was searching for react forms and i found ur video about react hook form and it helps me a lot and ur content its sooooo amazing... #new subscribe for you bro, Thanks a lot , keep doing it
Wow! That's so awesome! Thanks a billion! 🙏🌞
Thank you very much, It was wonderful method to understand i18Next
it doesn't work for me with the json fil
unless i used directly in my i18n file
This was very helpful, thanks
Cool!
Hi from Krasnoyarsk!
Apreaciate your video, i love it :D. btw i confuse when refreshing page the language change to default, how to save the chosen language on reload using cache / cookies?
how if we implement using local storage?
cause if user refresh the page, lang that choosed before will change
You used object to store the 2 languages part right?
Nice information, with a very Nice Thumbnail :))
I'm not sure what i18next-http-backend does. Can anyone explain it to me?
In your video you created files for localization, but where do you provide paths to these files?
i18next-http-backend package by default, expects to load translation files from the public/locales/{lng}/translation.json directory where lng is the language code.
why there are log in our web console from i18n whenever our web start?
how to get localization with the url website/en or de,es ?
Thank you a lot!
How to append language code to the URL when we switch the language?
after restart page goes to main language how can we fix it? can you help me pl?
Huge thanks for this lesson.
What if we need to translate a variable outside of the React component?
For example some shared labels variable from constants.js file (which was used in different files). Translation appears only after page refreshing. Any workaround?
Impor i18next in the costants file, the make a instance of t function..
Hi, it works only in localhost:3000 but when I do npm run build the app can't locate the translation files and display error message: i18next.js:27 i18next::backendConnector: loading namespace translation for language en failed failed parsing /locales/en/translation.json to json
Great video !
thanks Mate!
thank you very much 👍
How do you do it with react typescript? i'ts giving me errors :c
Thank you for the video, how can we take translation from other sources like db?
Why install also react-i18next ? Isn't i18next enough ?
Thank you !
I need one language to be in italic. How to do this with the t function?
Все кратко и понятно) Спасибо!
Where did you tell i18next that your locales are in the public folder ?????
Nice video) But how we can use locale files from server - not from front-end part?
It doesnt work for me. Nothing appears when I run the code
thank you
Hi, beside the steps in video, how could I control the website direction according to language (RTL & LRT)?
Just Check current lang nd provide the appropriate attr dude
How can i Api data convert to other language?
great
спасибо!
Thanks for keeping the video short to the point.
It's sad you haven't provided any example of using the back-end. Why are you adding it at 0:48 at all? I didn't find also any follow-ups on this topic on your channel.
+1 for vim plugin
nice one
nice one Maksim, and to the point as usual ;) is it possible to use this solution to integrate different api calls for different languages PLUS the locales you added in this tutorials?
Hmm, Abbas, could you clarify what do you mean by applying languages to the api calls?
@@satansdeer1 when I have 2 languages for the web app, and there's 2 apis urls one for each language... Plus some static translation done only in frontend and not coming through apis (ex: Read more, show less... etc). What the best way to apply this scenario?!
Also what about the /urls and seo? Will search engine be able to crowl different languages?
Thanks
@@abbassultan4315 yes, because the urls will be different (we serve different language depending on query params). As for APIs we usually don't localize them and perform all the localization on the frontent. The API are only returning the values. Also it might help if you use the base translation as the key for translaiton. I'll show how to do it in one of the next videos
Спасибо большое!
cool thanks
♥
спасибо!!!
its working
Hey. How can I save the language in local storage or cookie? If I select german language after page relaod it should be also german.
You can but I would keep it as a part of the URL
@@satansdeer1 Much better solution. But how does that work?
Hello, thank you for this best tutorial. i have classe with mobx react how i can define constants t and i18n ? thank you
Спасибо!
Спасибо)
Nice quick and easy tutorial! Could you do a video on supporting different datetime formats for different locales ? (with a library like moment etc..)
Keep up the good work, I subscribed :D
Спасибо очень помог)
want to learn more for i18n!
I'd be really interested to see the localizations being loaded from a dynamic source. For example, what if you stored all of your localization strings in Google Firebase or Firestore?
mobiGeek it is a static file, you don't store it in the database, but yeah, I'll show it in one of the next vids
@@satansdeer1 I want it to come from a database 🙂
Goal is to then allow an admin UI so that non-technical users can modify localized strings "on the fly".
@@kingofgeeks Just fetch it from the database as a JSON and use it
@@satansdeer1 Hello Maksim, thank for such a nice content. Restlessly waiting for your video where you can provide a content for dynamic data e.g from json or database. Thanks
@@satansdeer1 Is the video out?
Отличный туториал
I guess it would be similar for react native? I'll try it
Thanks for the video
У меня этот акцент почему-то мурашки вызывает 😬 а видос классный
why everyone does exacly what they said in toturials???? if you can, make one without button so it detects the language from browser and change automaticly.
Thanks for the videos Maksim, they help me a great deal!
One suggestion though: would be nice if you desactivate the autocompletion feature when doing your recordings. It's nice that your videos are fast, they save a lot of time, but those autocompletion suggestions are really getting in the way a lot.
Best regards
thanks Felipe, i got rid of them (mostly) in my new videos
I tried this the other day, but ended removing the React.Suspense, it was bugging my @material-ui animations
Hm, do you have a repo or a gist to show what it was? I'd like to try as well
This video doesn't address importing the json resources at all.
Спасибо, всё понятно
and in that case you can use the translations only in render (((((
4 минуты и все понятно! Найс
Fast and unclear.
чувак, жаль, что ты не сделал и на русском тоже
ох уж этот акцент :)
Trans component..thats funny
One hell gross thumbnail