Додаткові рекомендації
Ми розуміємо, що бібліотеки, включені до create-t3-app, не вирішують кожну проблему. Хоча ми рекомендуємо розпочати свій проект з того, що ми надаємо, настане час, коли вам потрібно буде встановити інші пакети. Тільки ви можете знати, чого потребує ваш проект, але ось деякі рішення, які ми часто рекомендуємо.
Це рекомендації окремих учасників Create T3 App і не повинні розглядатись як “офіційні” рекомендації команди Create T3 App або T3-OSS. Будь ласка, проведіть власне дослідження, особливо перед тим, як прив’язуватись до платних сервісів.
Управління станом
Примітка редактора: Бібліотеки керування станом можуть бути відмінними, але часто не потрібні. tRPC’s хуки React Query повинні впоратися із вашим серверним станом. Для клієнтського стану почніть з useState React, і зверніться до одного з цих варіантів, коли вам буде потрібно більше.
Zustand
Для того, щоб більше ніколи не використовувати Redux
“Сучасний простий Redux”, який ви не знали, що вам потрібен. Poimandres↗ завжди можна довіряти. Ви можете створювати все, від відеодзвінків до ігор та серверів із цією маленькою бібліотекою.
Jotai
Для того, щоб більше ніколи не використовувати Context
Jotai важко перевершити в підході Atomic. Також від Poimandres↗, Jotai дозволяє визначати сінгелтони, які здаються глобальними useState. Відмінний варіант для станів, які не вимагають стейт машини прямо зараз.
Бібліотеки компонентів
Більшість додатків потребують однакову низку компонентів: перемикачі, меню, модальні вікна і т.д. Ці бібліотеки надають відмінні, доступні компоненти, які ви можете використовувати та налаштовувати на свій розсуд.
Бібліотеки компонентів без стилів
Також відомі як headless бібліотеки, вони надають відмінні, нестилізовані та доступні компоненти, які ви можете налаштувати на свій розсуд. Ось кілька рекомендацій.
-
Radix UI↗ надає потужний набір зручних і доступних примітивів, які ви можете стилізувати за допомогою звичайного CSS або Tailwind CSS.
-
Headless UI↗ від команди Tailwind CSS також надає нестилізовані, доступні компоненти, які бездоганно інтегруються з Tailwind CSS.
-
React Aria↗ надає доступні примітивні налаштування UI для вашої системи дизайну. Їхній компонент вибору дати - це найвищий рівень.
Бібліотеки компонентів зі стилями
Коли вам просто потрібно, щоб ваш додаток виглядав непогано
Іноді ви створюєте проект, де вам просто потрібно, щоб інтерфейс користувача виглядав від початку. Для адміністративних панелей управління та інших подібних проектів будь-яка з цих бібліотек компонентів упорається з цим завданням.
Class Variance Authority
Для створення бібліотек інтерфейсу користувача
Декларативно створюйте бібліотеку інтерфейсу користувача з різними кольоровими, розмірними і т.д. варіантами. Коли ваш проект досягає масштабу, де вам потрібен стандартизований набір компонентів інтерфейсу користувача з кількома варіантами з використанням Tailwind CSS, CVA - відмінний інструмент.
Анімації
Наші рекомендації для створення анімацій у вашому додатку.
AutoAnimate
Для анімацій з одним рядком коду
Більшість бібліотек анімації намагаються задовольнити кожен можливий випадок використання і стають громіздкими. AutoAnimate – це інструмент без конфігурації, який дасть вам значне покращення UX без додаткових зусиль розробника.
Framer Motion
Для складних анімацій із декларативним кодом
Framer Motion надає простий, декларативний синтаксис і дозволяє писати менше коду для створення всього: від складних анімацій і навіть до жестів.
Деплоймент, інфраструктура, бази даних і CI
Vercel
Для хостинга вашого додатка
Vercel позбавив нас болю при деплойменті веб-додатків, зробивши його простою інтеграцією з GitHub, яку можна встановити і забути. Ми без проблем масштабувалися до сотень тисяч користувачів. Він працює на AWS, але має набагато кращий інтерфейс :)
PlanetScale
Для баз даних без занепокоєння
PlanetScale - найкраща serverless платформа для баз даних, яку ми використовували. Неймовірна масштабованість, чудовий DX і фантастична ціна. Якщо ви використовуєте SQL (і, сподіваюся, Prisma), це важко перевершити.
Railway
Для розміщення вашої інфраструктури
“Сучасний Heroku”. Найпростіший спосіб запустити реальний сервер. Якщо вам не вистачає функціоналу Vercel і PlanetScale, то Railway, ймовірно, вам підійде. Вкажіть його на репозиторій GitHub і готово.
Upstash
Для serverless Redis
Ми любимо Prisma і PlanetScale, але деякі проєкти вимагають більш продуктивного рішення. Upstash дає вам змогу отримати in-memory продуктивність Redis у вашому безсерверному проєкті, не переймаючись самостійним управлінням інфраструктурою та масштабуванням.
Pusher
Для безсерверних WebSocket-ів
Якщо WebSocket є основним фокусом вашого проекту, ви можете розглянути більш традиційний бекенд, такий як Fastify↗ (який також працює з tRPC!↗). Але для швидкого додавання WebSocket у T3 App, Pusher - чудовий вибір.
Soketi
Soketi - це самодостатня, проста і швидка альтернатива Pusher. Він повністю сумісний з Pusher SDK, який ви можете використовувати для підключення до сервера. Soketi serverless також перебуває в бета-версії.
Аналітика
Користувацькі дані дуже цінні, коли ви створюєте додаток. Ось кілька рекомендованих провайдерів аналітики.
Plausible
Потрібна аналітика? Plausible - один із найшвидших способів її отримати. Супер мінімалістичний. У нього навіть є простий плагін для Next.js↗.
Umami
Umami - це самодостатня, проста, швидка і конфіденційна альтернатива Google Analytics. Ви можете легко задеплоїти його на Vercel, Railway і т.д. з PlanetScale як базою даних.
Інше
Next Bundle Analyzer
Буває складно визначити, що буде включено до збірки вихідних даних для вашого додатка. Next Bundle Analyzer - це простий спосіб візуалізувати й аналізувати JavaScript-бандли, які генеруються.