Next.js static export hosten: out/ in seconden live

Q: Werkt mijn Next.js-404-pagina?

Ja. next build schrijft 404.html vanuit je not-found-pagina (App Router) of pages/404 (Pages Router), en Lobsite serveert die voor elk adres dat niet bestaat.

Next.js kan een site bouwen die geen server nodig heeft: zet output: "export" en next build schrijft elke pagina als HTML naar out/. Lobsite host die map. Voer npm run build uit, dan npx lobsite, en de site staat live op een *.lobsite.app-adres met HTTPS. Voor de duidelijkheid vanaf het begin: deze pagina gaat over statische exports. Serverrendering, API-routes en middleware hebben een Node.js-host nodig, zoals Vercel.

Zo werkt het

Zet statische export aan in next.config.js met output: "export" (zie hieronder) en voer dan npm run build uit. De site komt in out/.
Voer npx lobsite uit in het project. Het deployt out/, niet public/ of .next/. De eerste deploy heeft geen account nodig en duurt 6 uur.
Houd hem met de claimlink, in een gratis account. Daarna werkt elke npm run build && npx lobsite hetzelfde adres bij.

next.config.js voor een statische export

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

module.exports = nextConfig;

output: "export" laat next build de map out/ schrijven. De oude opdracht next export bestaat sinds Next.js 14 niet meer; deze instelling heeft hem vervangen.
images: { unoptimized: true } is nodig als je next/image gebruikt: de standaardloader verkleint afbeeldingen per verzoek op een server. Hiermee worden afbeeldingen geserveerd zoals ze zijn; verklein ze vóór de build of gebruik een eigen loader.
trailingSlash kan uit blijven. Pagina's worden geschreven als about.html, en Lobsite serveert ze op /about.

Wat een statische export niet kan

De Next.js-documentatie somt de functies op die een server nodig hebben. Degene waar mensen het vaakst tegenaan lopen:

API-routes en Route Handlers, behalve statische GET-handlers. Stuur formulieren in plaats daarvan naar /_lobsite/forms/contact; zie formulieren.
redirects, rewrites en headers in next.config. Verplaats doorverwijzingen en headers naar lobsite.toml, waar ze voor elk verzoek gelden; de Doorverwijzingsgenerator schrijft de regels.
Middleware, Server Actions, ISR en cookies() of headers() in pagina's.
Dynamische routes zonder generateStaticParams: elke pagina moet bij de build bekend zijn.

Leunt je app hierop, dan is het geen statische site, en is een host die Next.js op een server draait de juiste keuze.

Alleen gewijzigde bestanden worden geüpload

Bestanden worden op hun hash opgeslagen. Een ongewijzigde site opnieuw deployen uploadt 0 bytes.

Elke deploy krijgt een URL

Bekijk een voorbeeld voordat het live gaat. Zet in één klik terug, inclusief doorverwijzingen.

Overal HTTPS

Elke site krijgt vanaf de eerste deploy een *.lobsite.app-adres met HTTPS.

Formulieren die gewoon werken

Laat een formulier wijzen naar /_lobsite/forms/contact. Spamfilter inbegrepen.

Configuratie in één bestand

Doorverwijzingen, headers en formulieren staan in lobsite.toml en reizen mee met elke deploy.

Limieten die je kunt nalezen

Elke limiet is gepubliceerd, en elke fout vertelt je wat je moet doen.

Next.js-hosts vergeleken

	Lobsite	Vercel	Netlify	GitHub Pages
Statische export (`output: "export"`)	Ja	Ja	Ja	Ja
Serverrendering, API-routes, middleware	Nee	Ja	Ja	Nee
Build op de server	Nee: je deployt `out/`	Ja	Ja	In GitHub Actions
Account vóór de eerste deploy	Nee: 6 uur live, daarna gratis houden	Ja	Ja	Ja, en een repository
Formulieren zonder backend	Ja, zodra de site in een account staat	Nee	Ja	Nee
Eigen domein	Ja, gratis	Ja	Ja	Ja

Vercel maakt Next.js en draait er alles van. Voor een bedrijfswebsite, blog of documentatie als statische export is Lobsite de eenvoudigere host: één opdracht, alleen gewijzigde bestanden uploaden, een voorbeeld-URL voor elke deploy.

Veelgestelde vragen

Kan ik hier een Next.js-app met serverside rendering hosten?

Nee. Lobsite serveert bestanden, dus alleen een statische export werkt. Gebruiken pagina's getServerSideProps, Server Actions of dynamische rendering, host hem dan waar Next.js op een server draait.

Waarom zijn mijn next/image-afbeeldingen kapot na de export?

De standaard-afbeeldingsloader heeft een server nodig. Voeg images: { unoptimized: true } toe aan next.config.js, of stel een eigen loader in die naar een afbeeldings-CDN wijst, en bouw opnieuw.

Werkt mijn Next.js-404-pagina?

Ja. next build schrijft 404.html vanuit je not-found-pagina (App Router) of pages/404 (Pages Router), en Lobsite serveert die voor elk adres dat niet bestaat.

Kan ik de App Router gebruiken met een statische export?

Ja. Server Components worden bij de build gerenderd; clientcomponenten draaien zoals gewoonlijk in de browser. Alleen functies die tijdens runtime een verzoek nodig hebben, vallen af.

Hosting voor Next.js static export