Привіт, друзі! У цій статті я поділюсь, як я створив свій особистий вебсайт, які технології використав та як побудована інфраструктура проєкту. Сподіваюся, що ця стаття дасть вам цінні insights (інсайти), щоб ви могли створити власний сайт.
Чому повний стек?
Ключовою метою для мене було забезпечити динамічне використання даних у проєкті та їх легке оновлення за необхідності. Крім того, я віддавав перевагу структурі повного стека, щоб мати повний контроль. Однак, оскільки я не хотів, щоб проєкт був надто великим, я вирішив, що найкращим варіантом буде поєднати back-end (бекенд) і front-end (фронтенд) в одній структурі. Ось тут і вступив в гру Next.js: його React-базований фреймворк і можливості серверного рендерингу (SSR) ідеально відповідали моїм вимогам.
Вибір бази даних та ORM
Я використовував MySQL як базу даних. Ця реляційна база даних є надійним рішенням для зберігання і обробки даних. Однак, замість того щоб писати SQL безпосередньо, я вибрав Prisma ORM, щоб зробити код більш читабельним і підтримуваним. Prisma значно полегшив операції з базою даних; я зміг швидко визначити схему бази даних і виконати необхідні міграції.
Панель адміністратора та керування даними
Усі дані додатка керуються через панель адміністратора. Панель адміністратора дозволяє контролювати все: від записів блогу до візуалізацій, від даних користувачів до діаграм. Я інтегрував API UMAMI для відстеження та аналізу поведінки користувачів. З UMAMI я можу збирати анонімну статистику про відвідувачів сайту і представляти ці дані у вигляді візуальних діаграм в панелі адміністратора.
Діаграми та візуалізація
Для всіх діаграм у панелі адміністратора я вибрав бібліотеку ReCharts. ReCharts стала чудовим рішенням для візуалізації даних, оскільки вона проста у використанні та налаштуванні.
Керування даними та API запити
Я використовував Redux Toolkit для організації потоку даних по всьому додатку. Інтегрував RTK Query для управління API запитами та синхронізації даних. Це поєднання зробило управління станом додатка більш ефективним і швидким.
Рішення для зберігання файлів
Я використовував Cloudinary, хмарне рішення, щоб забезпечити, що зображення та інші файли, що використовуються в додатку, не спричинятимуть проблем на VPS у довгостроковій перспективі. Cloudinary забезпечив велику зручність як для зберігання, так і для оптимізації медіафайлів.
Форми та валідація
Я використовував React-hook-form і ZOD Validator для пришвидшення процесу обробки форм та валідації. Ці два інструменти зробили обробку форм одночасно зручною та надійною.
Редактор багатого контенту
Я вибрав бібліотеку TipTap Text Editor для того, щоб зробити публікації в блозі більш зручними для користувачів та візуально привабливими. Я налаштував цей редактор і інтегрував його в проєкт у вигляді повторно використовуваного компонента. Це значно спростило редагування контенту як для мене, так і для майбутніх користувачів.
Розгортання проєкту
Я налаштував автоматизований процес CI/CD за допомогою GitHub Actions для розгортання проєкту. При кожному оновленні проєкт інтегрується в Docker-контейнер і легко розгортається на VPS. Я використовував NGINX для управління портами і забезпечення безпеки додатку. NGINX покращує продуктивність додатку, правильно маршрутизуючи вхідні запити.
Цей проєкт став чудовою можливістю дослідити потужність Next.js та сучасних веб-технологій. Якщо ви хочете зробити подібний проєкт або хочете детальніше ознайомитися з ним, вихідний код відкрито доступний на GitHub.
Якщо ви думаєте над створенням власного особистого проєкту, сподіваюся, ця стаття надихне вас. Чекаю на ваші коментарі та запитання!
Перекладено з: How I Built My Personal Website with Next JS