Сравнение подходов
Передо мной стоял выбор: простой HTML/CSS, SPA на React или полноценный фреймворк. Чистый HTML быстро собирается, но плохо масштабируется — добавление блога или динамических страниц превращается в боль. SPA на React решает проблему компонентов, но теряет SEO без серверного рендеринга. Next.js объединяет лучшее из обоих миров: SSG для статических страниц, серверные компоненты для производительности и файловый роутинг для простоты.
Почему shadcn/ui
В отличие от классических UI-библиотек, shadcn/ui не
устанавливается как npm-пакет. Компоненты копируются прямо в проект,
давая полный контроль над кодом. Это принципиальное отличие: нет
vendor lock-in, нет ограничений на кастомизацию, нет неожиданных
breaking changes при обновлении. Компоненты построены на Radix UI
и Tailwind CSS — доступны, стилизованы и хорошо документированы.
Темизация и производительность
Тёмная тема реализуется через CSS-переменные и next-themes.
Переключение мгновенное, без мерцания при загрузке. Tailwind CSS
в режиме JIT генерирует только используемые классы, что даёт минимальный
размер CSS-бандла. Серверные компоненты Next.js уменьшают количество
JavaScript на клиенте — страницы загружаются быстро даже на слабых
устройствах.
Итоги
Портфолио на Next.js + shadcn/ui получилось быстрым, красивым и легко расширяемым. Добавление новых проектов или постов сводится к правке одного файла с данными. Рекомендую эту связку всем, кто хочет портфолио продакшен-уровня без переусложнения. Время от идеи до рабочего сайта — буквально пара вечеров.