Hosting statycznego eksportu Next.js

Next.js potrafi zbudować stronę, która nie potrzebuje serwera: ustaw output: "export", a next build zapisze każdą stronę jako HTML w out/. Lobsite hostuje ten folder. Uruchom npm run build, potem npx lobsite, a strona będzie działać pod adresem *.lobsite.app z HTTPS. Dla jasności od początku: ta strona dotyczy statycznych eksportów. Renderowanie na serwerze, trasy API i middleware wymagają hostingu z Node.js, takiego jak Vercel.

Jak to działa

1. Włącz statyczny eksport w next.config.js przez output: "export" (zobacz niżej), potem uruchom npm run build. Strona trafi do out/.
2. Uruchom npx lobsite w projekcie. Wdraża out/, a nie public/ ani .next/. Pierwsze wdrożenie nie wymaga konta i trwa 6 godzin.
3. Zachowaj ją linkiem do przejęcia, na darmowym koncie. Potem każde npm run build && npx lobsite aktualizuje ten sam adres.

next.config.js dla statycznego eksportu

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

module.exports = nextConfig;

• output: "export" sprawia, że next build zapisuje out/. Starego polecenia next export nie ma od Next.js 14; zastąpiło je to ustawienie.
• images: { unoptimized: true } jest potrzebne, jeśli używasz next/image: domyślny loader zmienia rozmiar obrazów na serwerze przy każdym żądaniu. Z tym ustawieniem obrazy są serwowane bez zmian; zmień ich rozmiar przed buildem albo użyj własnego loadera.
• trailingSlash może zostać wyłączone. Strony są zapisywane jako about.html, a Lobsite serwuje je pod /about.

Czego nie potrafi statyczny eksport

Dokumentacja Next.js wymienia funkcje wymagające serwera. Te, na które trafia się najczęściej:

• Trasy API i Route Handlers poza statycznymi GET. Wysyłaj formularze na /_lobsite/forms/contact; zobacz formularze.
• redirects, rewrites i headers w next.config. Przenieś przekierowania i nagłówki do lobsite.toml, gdzie obowiązują dla każdego żądania; Generator przekierowań napisze reguły.
• Middleware, Server Actions, ISR oraz cookies() lub headers() w stronach.
• Dynamiczne trasy bez generateStaticParams: każda strona musi być znana w czasie builda.

Jeśli Twoja aplikacja na tym polega, nie jest stroną statyczną i właściwym wyborem jest hosting uruchamiający Next.js na serwerze.

Porównanie hostingów dla Next.js

Vercel tworzy Next.js i uruchamia wszystko, co ma. Dla strony firmowej, bloga czy dokumentacji zbudowanych jako statyczny eksport Lobsite jest prostszym hostingiem: jedno polecenie, wgrywane tylko zmienione pliki, URL podglądu dla każdego wdrożenia.

Najczęstsze pytania

Czy mogę tu hostować aplikację Next.js z renderowaniem na serwerze?

Nie. Lobsite serwuje pliki, więc działa tylko statyczny eksport. Jeśli strony używają getServerSideProps, Server Actions lub dynamicznego renderowania, hostuj je tam, gdzie Next.js działa na serwerze.

Dlaczego obrazy next/image nie działają po eksporcie?

Domyślny loader obrazów wymaga serwera. Dodaj images: { unoptimized: true } do next.config.js albo ustaw własny loader wskazujący na CDN obrazów i zbuduj ponownie.

Czy moja strona 404 z Next.js działa?

Tak. next build zapisuje 404.html ze strony not-found (App Router) lub pages/404 (Pages Router), a Lobsite podaje ją dla każdego nieistniejącego adresu.

Czy mogę używać App Routera ze statycznym eksportem?

Tak. Server Components renderują się w czasie builda; komponenty klienckie działają w przeglądarce jak zwykle. Niedostępne są tylko funkcje wymagające żądania w czasie działania.