Гейм чейнджер

Увидел на днях новость о том что вышел Next.js 12 с кучей новых крутых фич и улучшений. А я давно хотел уже поиграться с современным фронтендом на своих pet-проектах, да все никак не находил подходящую задачу под эти инструменты.

Я зашел на официальный сайт Next.js и увидел большой раздел документации посвященный интеграции со сторонними CMS.

Тут мне закралась мысль, а не попробовать ли мне Next.js для блога 🤔

Текущее решение

Я свои блоги уже давно перевел на статик-генераторы и в большинстве случаев использую Hugo. Генерируется все моментально из простых md-файлов в не менее простые html-файлы. Из коробки есть Live-reload, возможность использовать минимальную логику в шаблонах и т.д. Готовую статику можно закидывать на GitHub/GitLab pages, Vercel, S3 и куда душе угодно.

Но вот есть один минус – это использование картинок постах. У меня это выглядит так – я копирую картинки в static/uploads и вручную прописываю к ним пути в редакторе во время написания поста.

А хочется как в современных CMS - просто перетянуть файл в окошко редактора чтобы оно само куда надо подтянулось.

WordPress спешит на помощь

Вот тут я и решил попробовать связку Next.js + WordPress. Тем более что все основные фичи для создания блога у WordPress есть из коробки + с недавних пор там есть новый крутой блочный редактор для текстов.

Я открыл ридми у https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress, поднял локальный веб-сервер с WordPress и начал погружение в удивительный мир современного фронтенда.

Из описания стало понятно что при сборке сайта посты подтягиваются из WordPress и превращаются в странички на Next.js. Кажется то что мне нужно)

Удивительно, но на этапе npx create-next-app и npm install даже ничего не сломалось 😂

Нужно отметить что делал я все по документации - создал пару постов в WordPress с текстом и картинками с unsplash.com и установил плагин WP Graphql

Проблема раз

Затем я запустил npm run dev и получил ошибку гласящую о том что картинку с домена gravatar мы загрузить не можем и нужно этот домен добавить в список разрешенных в конфиг-файле (которого ещё нет). Что ж, я нагуглил в официальной документации как должен выглядеть кусок конфига и пофиксил эту проблему.

next.config.js

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/images/',
    domains: ['1.gravatar.com'],
  },
}

module.exports = nextConfig

Главная страница моего чудесного блога стала загружаться по адресу http://localhost:3000!

Проблема два

Далее я кликнул на один из постов и после долгого ожидания увидел сообщение об ошибке. Оказалось что наш Next.js ожидает наличие главного изображения у каждого поста и в случае его отсутствия падает с ошибкой. Окей.

Я добавил главные картинки в оба поста и на сей раз мой блог все же прогрузился.

Тут я уже решил что несмотря на эти косяки в целом все круто и пора бы собрать статичную версию сайта (как раз везде пишут что для Next.js рекомендован режим SSG!).

Проблема три

Набрал npm run build и надо ли говорить о том что ожидаемых html-файлов которые можно закинуть куда угодно я не увидел. В официальной доке пишут что все ок, нужно просто импортнуть то что получилось в Vercel и оно там будет работать. В качестве альтернатив предлагается поднять свой сервер на node.js для запуска нашего сайта либо экспортировать статичный сайт.

Окей, переходим на страницу документации рассказывающую о next export и кажется это то что нужно. Запускаю команду и получаю ошибку - оптимизация картинок в этом режиме не поддерживается и потому экспортировать сайт нельзя. В качестве решения предлагается воспользоваться сторонними облачными сервисами для оптимизации картинок или прикручивать свой кастомный loader который будет как-то манипулировать с картинками.

Ну ок, прописал в настройках использование стороннего сервиса imgix и запустил экспорт.

Получил новую ошибку:

1

Pages with `fallback` enabled in `getStaticPaths` can not be exported.

На этом мое терпение лопнуло.

Зачем это все?

Перед установкой всего этого зоопарка я думал о том что получится собрать из коробки простое решение где можно будет запустить WP локально, написать новый пост, а затем подтянув эти данные собрать статичный сайт и задеплоить его. В идеале чтобы картинки вытянулись из WP и задеплоились вместе со статичным сайтом. Ну или на худой конец поставить в WP плагин чтобы картинки улетали в S3 и были доступны оттуда.

Оказалось что из коробки это не работает. Даже если просто воспроизводить шаги из документации то наткнешься на досадные ошибки.

Как я понял дефолтный юзкейс такой – имеем запущенный и доступный публично WordPress + деплоим Next.js на Vercel. Посты у нас импортируются при сборке Next.js, а картинки видимо планируется тянуть с WP.

При таком подходе никаких плюсов по сравнению с голым WP я не увидел. Теперь вместо одной точки отказа у нас их две + добавляется шаг по пересборке всей этой балалайке при каждом обновлении контента.

Для чего-то простого оно не подходит и не работает из коробки, а для сложного нужно все переписывать.

Если честно, у меня однажды был подобный юзкейс. Где-то в недрах корпоративной сети был установлен WordPress в котором контент-менеджеры создавали новые посты и запускалась некая тулза которая подтягивала все посты через REST API и публиковала эти посты наружу. С таким я сталкивался лишь один раз и больше о таком никто не просил)

Выводы

Странно это все. В очередной раз я решил попробовать новый модный инструмент и он не подошел под мои задачи.