- Published on
5 причин перейти на фреймворк Next.js вместо CMS
К 2021 году, я перевел свои проекты на React фреймворк Next.js. В этом посте я расскажу, что побудило меня на это и в чем преимущества Next.js как фронт энда для небольших статических сайтов.
Подчеркну, это касается именно небольших контент-проектов. Фреймворк Next.js подойдет для авторского блога, портфолио, блога или информационного сайта без частых обновлений.
Я не буду категоричным: у Next.js есть и преимущества, и недостатки. Не буду также утверждать, что использовать CMS в качестве бэкенда и фронтенда неудобно (все-таки я 10 лет это делал).
В конечном счете, каждый выбирает, исходя из своих предпочтений и понимания веб-технологий.
Содержание
1. Отличная скорость
Сравнивая свой сайт с конкурентами, я расстраивался.
В первую очередь, меня интересовала платформа, которая избавит от головной боли любой cms – низкая скорость отклика.
Например, если вы откроете Drupal сайт в PageSpeed Insights, увидите нелестную картину для mobile устройств.
Я приложил немало усилий, чтобы улучшить показатели для Drupal
- поставил Memcache,
- перевел сайт на nginx,
- перенес сайт на дропплет DigitalOcean,
- оптимизировал код темплейтов в CMS,
- включил сжатие css / js.
Все это отняло много времени, но в целом не кардинально улучшило показатели отклика.
При этом, Next.js сразу же избавил меня от этой проблемы, и все показатели сразу же улучшились без каких-либо крайних мер.
Помимо достаточно противоречивых оценок в Lighthouse и PageSpeed Insights, нельзя не отметить улучшенный пользовательский опыт. Страницы сайта открываются мгновенно! Не нужно ждать ответа со стороны сервера, чтобы перейти на другую страницу.
Хотя часть данных все равно поступает с сервера достаточно медленно, контент-сайты работают очень быстро.
2. Удобное хранение данных
Собственно, сайт работает на платформе Vercel и не требует установки на хостинг и подключения базы данных (в моей конфигурации).
Все файлы хранятся в .md формате. Это привычный вариант для статических сайтов, например, Angular и Gatsby. Следственно, вы можете редактировать md-файлы в простом блокноте или специальном редакторе.
Любая CMS привязывает вас к wysiwyg редактору, который добавляет кучу мусора в код и довольно-таки капризен в настройке.
Впрочем, в Next.js сложнее обстоят дела с добавлением изображений. Если у вас нет бэкенда и вы храните данные в .md, придется вручную вставлять ссылки на картинки и загружать в репозиторий. Ручное редактирование файлов и путей отнимает кучу времени.
Также, любое изменение на сайте потребует ребилда проекта, так что оперативно обновлять данные не получится.
3. Оптимизация картинок
Одна из фишек Next.js – встроенная оптимизация изображений. Не нужно прибегать к сторонним решениям для компрессии png / jpg, перевода в webp, lazy load и т.п. Например, если сайт использует площадку Vercel для деплоя, картинки сжимаются на лету без предварительной настройки.
В Vercel подобная оптимизация бесплатна, но если у вас много картинок, потребуется оплата тарифа при достижении лимита в 1000 изображений.
В конфиге Next.js можно задать кастомный loader, выбрать степень компрессии или вообще отключить оптимизацию, чтобы снизить потребление ресурсов на Vercel.
4. Платформа для одностраничных сайтов
Next.js позволяет создавать проекты на основе шаблонов. На github вы найдете немало интересных готовых решений, которые работают “из коробки” и не требуют часов написания кода.
Например, есть полностью рабочий блог Tailwind Nextjs Starter Blog, нужно только отредактировать конфиг. Можно найти интернет магазин с интеграцией с популярными платформами.
Кстати, next.js можно использовать как фронтенд для CMS и множества веб-сервисов.
CMS для сайта с 3 страницами – так себе решение. Масса ненужных действий: настраивать, устанавливать на хостинг, подключать базу данных. И все это ради нескольких страниц. Даже если использовать 1 click приложения на хостинге, это все избыточно.
5. В ногу со временем
Ну и, наконец, резюмируя: Next.js оживляет интерес к изучению веб-технологий сегодняшнего и будущего.
На данный момент Next.js и React в целом – стремительно развивающаяся платформа, в то время как CMS, написанная на PHP, со всеми библиотеками, обновляется реже и более консервативна к изменениям.
Да, javascript требует уйму времени на освоение. Но мне видится, что изучать javascript перспективней, чем php и связанные с cms технологии. При всех достоинствах, кои я не умаляю!