Statisk Next.js-eksport: deploy out/ på sekunder

Q: Hvorfor er next/image-bildene mine ødelagt etter eksport?

Standard bildelaster trenger en server. Legg til images: { unoptimized: true } i next.config.js, eller sett en egen laster som peker mot et bilde-CDN, og bygg på nytt.

Q: Fungerer 404-siden min fra Next.js?

Ja. next build skriver 404.html fra not-found-siden din (App Router) eller pages/404 (Pages Router), og Lobsite leverer den for alle adresser som ikke finnes.

Next.js kan bygge et nettsted som ikke trenger en server: sett output: "export", så skriver next build hver side som HTML i out/. Lobsite hoster den mappen. Kjør npm run build, så npx lobsite, og nettstedet er live på en *.lobsite.app-adresse med HTTPS. For å være tydelig fra starten: denne siden handler om statiske eksporter. Serverrendering, API-ruter og middleware trenger en Node.js-vert som Vercel.

Slik fungerer det

Slå på statisk eksport i next.config.js med output: "export" (se under), og kjør så npm run build. Nettstedet havner i out/.
Kjør npx lobsite i prosjektet. Den deployer out/, ikke public/ eller .next/. Første deploy trenger ingen konto og varer i 6 timer.
Behold det med krav-lenken, i en gratis konto. Deretter oppdaterer hver npm run build && npx lobsite samme adresse.

next.config.js for en statisk eksport

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

module.exports = nextConfig;

output: "export" får next build til å skrive out/. Den gamle kommandoen next export er borte siden Next.js 14; denne innstillingen erstattet den.
images: { unoptimized: true } trengs hvis du bruker next/image: standardlasteren skalerer bilder på en server per forespørsel. Med den leveres bildene som de er; skaler dem før bygget, eller bruk en egen laster.
trailingSlash kan være av. Sider skrives som about.html, og Lobsite leverer dem på /about.

Hva en statisk eksport ikke kan

Next.js-dokumentasjonen lister funksjonene som trenger en server. De folk oftest støter på:

API-ruter og Route Handlers utenom statiske GET. Send skjemaer til /_lobsite/forms/contact i stedet; se skjemaer.
redirects, rewrites og headers i next.config. Flytt videresendinger og headere til lobsite.toml, der de gjelder for hver forespørsel; Videresendingsgeneratoren skriver reglene.
Middleware, Server Actions, ISR og cookies() eller headers() i sider.
Dynamiske ruter uten generateStaticParams: hver side må være kjent ved bygging.

Er appen din avhengig av dette, er den ikke et statisk nettsted, og en vert som kjører Next.js på en server er riktig valg.

Bare endrede filer lastes opp

Filer lagres etter hash. Å deploye et uendret nettsted på nytt laster opp 0 byte.

Hver deploy får en URL

Forhåndsvis før du går live. Rull tilbake med ett klikk, inkludert videresendinger.

HTTPS overalt

Hvert nettsted får en *.lobsite.app-adresse med HTTPS fra første deploy.

Skjemaer som bare fungerer

Pek et skjema mot /_lobsite/forms/contact. Spamfilter inkludert.

Konfigurasjon i én fil

Videresendinger, headere og skjemaer ligger i lobsite.toml og følger med hver deploy.

Grenser du kan lese

Hver grense er publisert, og hver feil forteller deg hva du skal gjøre videre.

Next.js-verter sammenlignet

	Lobsite	Vercel	Netlify	GitHub Pages
Statisk eksport (`output: "export"`)	Ja	Ja	Ja	Ja
Serverrendering, API-ruter, middleware	Nei	Ja	Ja	Nei
Bygger på serveren	Nei: du deployer `out/`	Ja	Ja	I GitHub Actions
Konto før første deploy	Nei: live i 6 timer, så behold det gratis	Ja	Ja	Ja, og et repository
Skjemaer uten backend	Ja, når nettstedet er i en konto	Nei	Ja	Nei
Eget domene	Ja, gratis	Ja	Ja	Ja

Vercel lager Next.js og kjører alt av det. For et bedriftsnettsted, en blogg eller dokumentasjon bygget som statisk eksport er Lobsite den enklere verten: én kommando, bare endrede filer lastes opp, en forhåndsvisnings-URL for hver deploy.

Ofte stilte spørsmål

Kan jeg hoste en Next.js-app med serverrendering her?

Nei. Lobsite leverer filer, så bare en statisk eksport fungerer. Bruker sider getServerSideProps, Server Actions eller dynamisk rendering, host den der Next.js kjører på en server.

Hvorfor er next/image-bildene mine ødelagt etter eksport?

Standard bildelaster trenger en server. Legg til images: { unoptimized: true } i next.config.js, eller sett en egen laster som peker mot et bilde-CDN, og bygg på nytt.

Fungerer 404-siden min fra Next.js?

Ja. next build skriver 404.html fra not-found-siden din (App Router) eller pages/404 (Pages Router), og Lobsite leverer den for alle adresser som ikke finnes.

Kan jeg bruke App Router med en statisk eksport?

Ja. Server Components rendres ved bygging; klientkomponenter kjører i nettleseren som vanlig. Bare funksjoner som trenger en forespørsel ved kjøretid, er utelukket.

Hosting av statisk Next.js-eksport