← Усі статті

Сучасний React-стек: Vite, Tailwind, i18next і TanStack Router

Покрокова збірка без хаосу залежностей: маршрутизація, стилі та локалізація в одному мінімальному, але готовому до продакшену каркасі.

Теги
НовиниfrontendReact
Сучасний React-стек: Vite, Tailwind, i18next і TanStack Router
Зміст

Коротко

Зібрати «сучасний» React-проєкт з нуля часто перетворюється на боротьбу з версіями: роутер тягне одне, Tailwind — інше, i18next — третє. На Dev.to розібрано мінімальний стек Vite + Tailwind CSS v4 + TanStack Router + i18next, який дає типобезпечну маршрутизацію, швидкий dev-сервер і масштабовану локалізацію без зайвих шарів.

Що сталося

Автор показує покрокову збірку на шаблоні react-ts:

  1. Vite — створення проєкту та базова конфігурація.
  2. Tailwind — пакети tailwindcss і @tailwindcss/vite, підключення плагіну в vite.config і імпорт @import 'tailwindcss' у CSS.
  3. TanStack Router — окремий router.tsx, підключення в main.tsx, devtools для відладки маршрутів.
  4. i18next — модуль src/utils/i18n, JSON-файли перекладів, одноразовий імпорт у корені застосунку.

Окремо попереджають про несумісність версій: за конфліктів peer-залежностей іноді допомагає npm i --force або відкат на трохи старішу версію Vite. Репозиторій із прикладом лежить на GitHub — зручно порівняти зі своєю структурою папок.

Чому це важливо

Компонент Навіщо в стеку
Vite Миттєвий HMR і швидкі production-збірки без важкого webpack-конфіга
Tailwind через Vite-плагін Стилі поруч із компонентами, без окремого PostCSS-танцю
TanStack Router Типізовані маршрути й параметри — менше помилок на навігації
i18next Перевірена схема для багатомовних SPA без прив’язки до Next.js

Для команд, які не хочуть meta-framework на кшталт Next.js, але потребують «дорослого» каркасу, такий набір — розумний компроміс між мінімалізмом і готовністю до зростання.

На практиці

  1. Створіть проєкт: npm create vite@latest my-app -- --template react-ts.
  2. Поставте Tailwind v4 з офіційним Vite-плагіном; за помилок установки — перевірте матрицю версій або --force.
  3. Винесіть маршрути в router.tsx, а не розмазуйте <Routes> по десятку файлів — TanStack Router любить явну декларацію дерева.
  4. Ініціалізуйте i18next один раз при старті; переклади тримайте в JSON за локалями (en.json, uk.json).
  5. Перед продом прогоніть npm run build і перевірте, що code-splitting маршрутів не ламає завантаження перекладів.

Якщо проєкт виросте — той самий каркас легко доповнити TanStack Query, Zod на межі API та CI з npm ci.

Підсумок

Гайд не про «ще один boilerplate», а про узгоджений мінімум: чотири інструменти, які закривають збірку, стилі, навігацію й мови. Має сенс взяти за основу, якщо стартуєте greenfield SPA і хочете уникнути dependency hell уже на першому тижні.