Привет .
Я Михаил, более 10 лет занимаюсь веб-разработкой: сайты, CRM, сервисы и приложения.
Сайт-портфолио для художника
Сайт-портфолио для художника

Задача

Передо мной стояла личная задача изучить Next.js. Я решил, что будет эффективнее сделать это на практике.

Поэтому выбрал простой тип сайта: портфолио.

Сейчас сайт довольно сырой, предстоит ещё много работы: наполнение контентом, внутренняя SEO-оптимизация, форма обратной связи, продвижение и пр. Есть желание деплоить фронтенд без Vercel.

Архитектура

Проект состоит из двух частей: frontend и backend.

Frontend

Фронт представляет из себя приложение на Next.js. Этот фреймворк, основанный на React, упрощает DX (Developer Expirience) при создании проектов, где нужен SSR или SG. Конкретно меня интересовала статическая генерация (SG), так как код страницы не зависит от того, какой пользователь на неё заходит.

Если вкратце, то все страницы собираются один раз при деплое. Это сильно экономит ресурсы сервера, так как не требуется на каждый запрос пользователя собирать/рендерить страницу, что бывает при SSR.

Backend

Информация о портфолио (работы и категории работ) хранятся в MODX 3, он выступает в роли headless-CMS. При сборке фронтенда единожды дёргается API, которое возвращает информацию о портфолио. Я выбрал хранение информации в CMS, так как там удобнее управлять информацией и это не требует вносить правки в код фронтенда.

Единственный нюанс: при изменении данных в CMS нужно заново запускать процесс деплоя, чтобы собрать фронтенд с актуальными данными.

Стек

  • Next.js (React) как Frontend
  • MODX 3 как Backend
  • Tailwind
  • TypeScript

Немного скриншотов

За обновлениями можно следить в telegram-канале https://t.me/quasiart