Хостинг статического экспорта Next.js

Next.js умеет собирать сайт, которому не нужен сервер: задайте output: "export", и next build запишет каждую страницу в виде HTML в out/. Lobsite размещает эту папку. Выполните npm run build, затем npx lobsite, и сайт заработает по адресу *.lobsite.app с HTTPS. Сразу оговоримся: эта страница про статический экспорт. Серверному рендерингу, API-маршрутам и middleware нужен хостинг с Node.js, например Vercel.

Как это работает

1. Включите статический экспорт в next.config.js через output: "export" (см. ниже), затем выполните npm run build. Сайт окажется в out/.
2. Выполните npx lobsite в проекте. Деплоится out/, а не public/ или .next/. Первый деплой не требует аккаунта и живёт 6 часов.
3. Сохраните сайт по ссылке для получения в бесплатном аккаунте. Дальше каждый npm run build && npx lobsite обновляет тот же адрес.

next.config.js для статического экспорта

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

• output: "export" заставляет next build записывать out/. Старой команды next export нет с Next.js 14; её заменила эта настройка.
• images: { unoptimized: true } нужна, если вы используете next/image: стандартный загрузчик масштабирует изображения на сервере при каждом запросе. С этой настройкой изображения отдаются как есть; уменьшите их до сборки или используйте свой загрузчик.
• trailingSlash можно не включать. Страницы записываются как about.html, и Lobsite отдаёт их по /about.

Чего не умеет статический экспорт

В документации Next.js перечислены возможности, которым нужен сервер. Чаще всего натыкаются на эти:

• API-маршруты и Route Handlers, кроме статических GET. Отправляйте формы на /_lobsite/forms/contact; см. формы.
• redirects, rewrites и headers в next.config. Перенесите перенаправления и заголовки в lobsite.toml, где они действуют для каждого запроса; правила напишет Генератор перенаправлений.
• Middleware, Server Actions, ISR, а также cookies() или headers() в страницах.
• Динамические маршруты без generateStaticParams: каждая страница должна быть известна во время сборки.

Если ваше приложение на это опирается, это не статический сайт, и правильный выбор — хостинг, который запускает Next.js на сервере.

Сравнение хостингов для Next.js

Vercel создаёт Next.js и запускает всё, что в нём есть. Для сайта компании, блога или документации, собранных как статический экспорт, Lobsite — более простой хостинг: одна команда, загружаются только изменённые файлы, свой URL предпросмотра для каждого деплоя.

Частые вопросы

Можно разместить здесь приложение Next.js с серверным рендерингом?

Нет. Lobsite отдаёт файлы, поэтому работает только статический экспорт. Если страницы используют getServerSideProps, Server Actions или динамический рендеринг, размещайте приложение там, где Next.js работает на сервере.

Почему после экспорта ломаются изображения next/image?

Стандартному загрузчику изображений нужен сервер. Добавьте images: { unoptimized: true } в next.config.js или задайте свой загрузчик, указывающий на CDN изображений, и пересоберите сайт.

Работает ли моя страница 404 из Next.js?

Да. next build создаёт 404.html из вашей страницы not-found (App Router) или pages/404 (Pages Router), и Lobsite отдаёт её для любого несуществующего адреса.

Можно использовать App Router со статическим экспортом?

Да. Server Components рендерятся при сборке; клиентские компоненты, как обычно, работают в браузере. Недоступны только возможности, которым нужен запрос во время работы.