Як побудувати багатомовний сайт на React або Vue

Багатомовний сайт - це перемикач мов у шапці де пов’язана логіка, структура і продуманий підхід, щоб контент виглядав природно для кожного користувача. Коли мова заходить про React або Vue, з’являється ще один рівень складності, але й більше гнучкості. Якщо все зробити правильно з самого початку, підтримка кількох мов не перетвориться на головний біль.

Я розповім, як підходити до цього на практиці, без зайвої теорії та складних слів.

З чого починається багатомовність у SPA

React і Vue - це SPA або гібридні застосунки. Тут немає класичних HTML-сторінок для кожної мови, тому переклади потрібно продумувати ще на етапі архітектури. Головне правило просте: текст не має жити в компонентах. Якщо фрази зашиті в коді, масштабування стане болісним. Правильний підхід - винести всі тексти в окремі файли та працювати з ними через систему локалізації.

Як організувати переклади

У більшості проєктів використовують JSON-файли, де ключ - це ідентифікатор фрази, а значення - переклад конкретною мовою. Компонент отримує не текст, а ключ, і вже система локалізації підставляє потрібний варіант. Це виглядає трохи незвично спочатку, зате з часом дуже спрощує життя.

5 кроків побудови багатомовного сайту

1. Визначити список мов і базову мову. Це основа, від якої відштовхується вся логіка.
2. Підключити бібліотеку локалізації. Для React зазвичай беруть i18n-рішення, для Vue - vue-i18n.
3. Винести всі тексти в окремі файли. Кожна мова - свій набір перекладів.
4. Реалізувати перемикання мов. Зі збереженням вибору користувача.
5. Продумати структуру URL або стану. Мова має бути частиною маршруту або глобального стану.
    

React і Vue у контексті багатомовності

Підхід у React і Vue схожий за логікою, але різний у деталях. У React часто використовують контекст або глобальний стор для зберігання активної мови. У Vue це робиться трохи простіше через реактивність фреймворку.В обох випадках важливо, щоб зміна мови не викликала повного перезавантаження сторінки. Переключення має бути миттєвим і непомітним.

Про що часто забувають

Навіть коли переклади працюють, є нюанси, які легко пропустити на старті.

• різна довжина текстів у різних мовах;
• напрямок тексту для окремих мов;
• формати дат, чисел і валют;
• переклади помилок і повідомлень;
• SEO для багатомовних сторінок.

Ці дрібниці не видно одразу, але саме вони створюють відчуття якісного продукту.

SEO та багатомовність

Якщо сайт публічний, варто одразу подумати про пошукові системи. Для React та Vue часто використовують серверний рендер або пререндеринг, щоб пошуковики бачили контент кожною мовою. Також важливо, щоб кожна мовна версія мала свою адресу і чітку структуру. Це допомагає і SEO, і користувачам.

Не намагайтесь зробити все ідеально з першої спроби. Краще реалізувати базову багатомовність, перевірити її в реальному користуванні й тільки потім ускладнювати. І ще, домовтесь у команді про правила іменування ключів перекладів. Це дрібниця, яка економить багато часу.

Багатомовний сайт на React або Vue - це не складно, якщо підійти до задачі системно. Коли тексти винесені з компонентів, логіка мови централізована, а структура продумана, проєкт легко масштабується.

Такий підхід дозволяє додавати нові мови без переписування коду і підтримувати порядок у великому застосунку. А саме це і відрізняє продуманий продукт від тимчасового рішення.