React-i18next (i18n, l10n). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація
Вставка
- Опубліковано 11 лип 2024
- Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 5363 5426 0316 4386
🌍 Що ми дізнаємося у цьому відео:
🌐 Що таке локалізація та інтернаціоналізація і чому це важливо для вашого проєкт.
🌐 Встановлення та налаштування React-i18next - популярної бібліотеки для роботи з багатьма мовами в додатках на React.
🌐 Додавання перекладів для різних мов та їх інтеграція у ваші компоненти та шаблони.
🌐 Перемикання мови на сайті для користувачів та збереження їхніх виборів.
🌐 Поради та практичні приклади з власного досвіду.
Не забувайте підписуватися на мій канал, ставити лайки і натискати на дзвіночок, щоб не пропустити нові відео зі світу веброзробки та програмування!
Локалізація та інтернаціоналізація - це ключові елементи будь-якого успішного вебпроєкт. Давайте разом дослідимо цю тему та зробимо ваш сайт більш доступним для всього світу. Будьмо глобальними разом! 💻🌎
#React #React_i18Next #reactIntl #reaction #i18n #l10n #Локалізація #Інтернаціоналізація
00:00 Всім привіт
01:56 Демо на сторінці React
03:00 Про автора
03:50 Порівняння бібліотек
04:56 Кому корисне дане відео?
13:07 Автоматичне визначення мови
16:25 Збереження вибраної мови при перезавантаженні
17:33 Перемикання мов
20:16 Disabled кнопку вибраної мови
21:09 Рефакторинг
24:56 Винесення файлів перекладів
26:57 Вкладені ключі
32:06 Дякую за увагу
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode - Наука та технологія
круто, дуже цікаво як змінювати динамічний текст, наприклад з бази даних
Дуже дякую!
З нетерпінням чекаю на інші відоси по i18next, особливо про динамічні тексти!
Дякую. По динамічних текстах буде після свят. Сподіваюсь на наступному тижні.
Що саме вас цікавить? Насправді там нічого важкого
звісно що це дуже й дуже цікава тема та ще й на УКРАЇНСЬКІЙ. Тому чекаємо на нове відео і дуже бажано з typescript та різними практичними фічами. Дуже дякую за такий контент на українській
Дякую за позитивний відгук. Подумаю над наступним відео.
Дякую! давайте обширне відео, гадаю ця тема корисна :)
постараюсь. Дякую.
дуже велике прохання показати як за допомогою i18next локалізувати форми react-hook-form, а саме errors.message, тому що перешукав увесь і-нет на цю тему як англ так і на укр мові, але так і нічого не знайшов. Ви мабуть будете першим хто це питання розкрив. Були змоги налаштувати локалізацію в RHF через yup, але дуже воно все якось туго заходить і не получається. Пробував також через Zod, але все марно. Дякую
привіт), дуже дякую за розʼяснення, дуже приємно що рідною мовою), проте, так хочеться більше інформації і розʼяснення як перекладати динамічні дані)
Дуже і дуже потрібна тема 😊
Дякую
Радий чути. Матеріалу на цю тему є багато. Якщо цікаво - пишіть коментарі, буду думати над обширнішим відео.
@@MaksymRudnyiможливо було ю цікаво почути, про те яка різниця є між різними видами локалізації, в тому числі коли на сайтах імплементується прямий машинний переклад, також за саб доменом... Якісь ще можливі підходи, та котрий коли краще використовувати 🤔
Загалом, вчу програмування вже 2.5 роки, але лише останні кілька місяців вибрав для себе реакт як основний напрямок розвитку, тому з кожним днем все більше і більше питань 😅
Подумаю над створенням відео. З приводу прямого машинного перекладу - так практично ніхто не робить, як мінімум якісні, дорогі бренди. Якість перекладу падає, псується репутація. Машина не завжди розуміє контекст. В залежності від місця використання, одне і те ж склово може перекладатися абсолютно по різному. В мене на попередньому проєкті була підтримка 8 мов.
@@MaksymRudnyi на кількох сервісах помічав вбудований Гугл переклад, в цілому не можу детальніше описати, просто було в окрему кнопку виділено траснліт та й усе, а ну і контент був в специфічному контейнері... Трішки дивно виглядало, але все ж зацікавило 😅
А так то більше мабуть і немає конкретних питань на тему локалізації (хіба що без використання готових рішень, але в цілому дивлячись на те як працюють готові рішення, можна самостійно зрозуміти, як зробити свій аналог, чи потрібно це, та в більшості випадків ні, але про всяк випадок, можна погратись, для збільшення досвіду, сам сритав сам відповів 😅)
А если мы должны использовать кастомные роуты для смены языка? например '/en' - как нам роутинг сделать на основе получения данных геолокации? Не могу понять как нам язык получать по урлу
а тут треба вибирати. Або встановлюємо мову в залежності від урли (/en, /ua) або від локації. Можна вказати пріорітети. Щоб вибирати мову по урлі - можна глянут на доку i18n . В них десь був приклад.
на nextjs сильна буде відрізнятися підхід ?
Не сильно. reacti18next повністю інтегрований в некст
Доброго дня підкажіть як змінювати URL при перемиканні мови додаючи префікс /de але щоб на основній мові цього не було. Порадьте будь ласка щось
Прочитайте щось типу такого prototyp.digital/blog/multi-language-routing-in-react
як зробити на різних сторінках, отримуючи дані з беку ?
Отримувати файли з текстами перекладів з беку?
@@MaksymRudnyi так
@@Rasty_Boss В документації є приклад коли файли з перекладами кладуться в публічку папку. Звідти і береться потрібний переклад. По ідеї, ці файли не повинні йти в бандл проєкту, тому розмір може не хвилювати. react.i18next.com/latest/using-with-hooks#translate-your-content
де брати ліцензію на вебшторм?)
Придбати)
Ну або пощастить і це покриватиме фірма 🤔
Чи ще як варіант виграти десь 😂
Якщо ви студент, то є можливість отримати студентську підписку (безкоштовно)
Купити на офіційному сайті. Коштує не дорого. В моєму випадку - компанія покриває витрати.
@@MaksymRudnyi та ну його, буду юзати вскод і за ті гроші піду з дівчиною в стрийський парк, і на каву але перше треба десь знайти її
@@MaksymRudnyi до моменту поки не на роботі, то не так і дешево використовувати)
Але з іншого боку воно все ще того варте 🙃
Я до прикладу інтележі використовую, і натішитися після вскод не можу)