Next.js може зібрати сайт без сервера: установіть output: "export", і next build запише кожну сторінку як HTML у out/. Lobsite розміщує цю папку. Виконайте npm run build, потім npx lobsite — і сайт доступний за адресою *.lobsite.app з HTTPS. Уточнимо відразу: ця сторінка про статичний експорт. Серверний рендеринг, маршрути API й middleware потребують хостингу Node.js, як-от Vercel.
Як це працює
- Увімкніть статичний експорт у
next.config.jsчерезoutput: "export"(дивіться нижче), потім виконайтеnpm run build. Сайт потрапить уout/. - Виконайте
npx lobsiteу проєкті. Команда розгортаєout/, а неpublic/чи.next/. Перше розгортання не потребує облікового запису й діє 6 годин. - Збережіть сайт за посиланням для збереження в безкоштовному обліковому записі. Надалі кожне
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 на сервері.
Файли зберігаються за хешем. Повторне розгортання незміненого сайту завантажує 0 байтів.
Перегляньте перед публікацією. Відкотіть одним натисканням разом із перенаправленнями.
Кожен сайт отримує адресу *.lobsite.app із HTTPS від першого розгортання.
Спрямуйте форму на /_lobsite/forms/contact. Фільтрація спаму включена.
Перенаправлення, заголовки та форми зберігаються в lobsite.toml і супроводжують кожне розгортання.
Усі обмеження опубліковані, а кожна помилка підказує наступний крок.
Порівняння хостингів Next.js
| Lobsite | Vercel | Netlify | GitHub Pages | |
|---|---|---|---|---|
Статичний експорт (output: "export") |
Так | Так | Так | Так |
| Серверний рендеринг, маршрути API, middleware | Ні | Так | Так | Ні |
| Збірка на сервері | Ні: ви розгортаєте out/ |
Так | Так | У GitHub Actions |
| Обліковий запис перед першим розгортанням | Ні: працює 6 годин, потім можна зберегти безкоштовно | Так | Так | Так, і репозиторій |
| Форми без бекенду | Так, після додавання сайту до облікового запису | Ні | Так | Ні |
| Власний домен | Так, безкоштовно | Так | Так | Так |
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 генеруються під час збірки, клієнтські компоненти працюють у браузері як зазвичай. Недоступні лише можливості, яким потрібен запит під час виконання.