Задача
Передо мной стояла личная задача изучить 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
