Next.js-Static-Export hosten: out/ in Sekunden deployen

Q: Warum sind meine next/image-Bilder nach dem Export kaputt?

Der Standard-Bild-Loader braucht einen Server. Füge images: { unoptimized: true } zu next.config.js hinzu oder setze einen eigenen Loader, der auf ein Bild-CDN zeigt, und baue erneut.

Q: Funktioniert meine Next.js-404-Seite?

Ja. next build schreibt 404.html aus deiner not-found-Seite (App Router) oder pages/404 (Pages Router), und Lobsite liefert sie für jede Adresse aus, die nicht existiert.

Next.js kann eine Website bauen, die keinen Server braucht: Setz output: "export", und next build schreibt jede Seite als HTML nach out/. Lobsite hostet diesen Ordner. Führe npm run build aus, dann npx lobsite, und die Website ist unter einer *.lobsite.app-Adresse mit HTTPS live. Damit es von Anfang an klar ist: Diese Seite handelt von statischen Exporten. Server-Rendering, API-Routen und Middleware brauchen einen Node.js-Hoster wie Vercel.

So funktioniert es

Schalte den statischen Export ein in next.config.js mit output: "export" (siehe unten), dann führe npm run build aus. Die Website landet in out/.
Führe npx lobsite aus im Projekt. Es deployt out/, nicht public/ oder .next/. Das erste Deploy braucht kein Konto und hält 6 Stunden.
Behalte sie mit dem Übernahme-Link, in einem kostenlosen Konto. Danach aktualisiert jedes npm run build && npx lobsite dieselbe Adresse.

next.config.js für einen statischen Export

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

module.exports = nextConfig;

output: "export" lässt next build den Ordner out/ schreiben. Den alten Befehl next export gibt es seit Next.js 14 nicht mehr; diese Einstellung hat ihn ersetzt.
images: { unoptimized: true } ist nötig, wenn du next/image nutzt: Der Standard-Loader skaliert Bilder pro Anfrage auf einem Server. Damit werden Bilder unverändert ausgeliefert; skaliere sie vor dem Build oder nutze einen eigenen Loader.
trailingSlash kann aus bleiben. Seiten werden als about.html geschrieben, und Lobsite liefert sie unter /about aus.

Was ein statischer Export nicht kann

Die Next.js-Doku listet die Funktionen auf, die einen Server brauchen. Die, auf die man am häufigsten stößt:

API-Routen und Route Handlers, außer statischen GET-Handlern. Schick Formulare stattdessen an /_lobsite/forms/contact; siehe Formulare.
redirects, rewrites und headers in next.config. Verschiebe Weiterleitungen und Header nach lobsite.toml, wo sie für jede Anfrage gelten; der Redirect-Generator schreibt die Regeln.
Middleware, Server Actions, ISR sowie cookies() oder headers() in Seiten.
Dynamische Routen ohne generateStaticParams: Jede Seite muss beim Build bekannt sein.

Wenn deine App darauf angewiesen ist, ist sie keine statische Website, und ein Hoster, der Next.js auf einem Server ausführt, ist die richtige Wahl.

Nur geänderte Dateien werden hochgeladen

Dateien werden nach ihrem Hash gespeichert. Ein erneutes Deploy einer unveränderten Website lädt 0 Bytes hoch.

Jedes Deploy bekommt eine URL

Vorschau ansehen, bevor es live geht. Mit einem Klick zurückrollen, samt Weiterleitungen.

HTTPS überall

Jede Website bekommt ab dem ersten Deploy eine *.lobsite.app-Adresse mit HTTPS.

Formulare, die einfach funktionieren

Lass ein Formular auf /_lobsite/forms/contact zeigen. Spamfilter inklusive.

Konfiguration in einer Datei

Weiterleitungen, Header und Formulare stehen in lobsite.toml und reisen mit jedem Deploy mit.

Limits, die du nachlesen kannst

Jedes Limit ist veröffentlicht, und jeder Fehler sagt dir, was als Nächstes zu tun ist.

Next.js-Hoster im Vergleich

	Lobsite	Vercel	Netlify	GitHub Pages
Statischer Export (`output: "export"`)	Ja	Ja	Ja	Ja
Server-Rendering, API-Routen, Middleware	Nein	Ja	Ja	Nein
Build auf dem Server	Nein: du deployst `out/`	Ja	Ja	In GitHub Actions
Konto vor dem ersten Deploy	Nein: 6 Stunden live, dann kostenlos behalten	Ja	Ja	Ja, und ein Repository
Formulare ohne Backend	Ja, sobald die Website in einem Konto ist	Nein	Ja	Nein
Eigene Domain	Ja, kostenlos	Ja	Ja	Ja

Vercel entwickelt Next.js und führt alles davon aus. Für eine Marketing-Website, einen Blog oder eine Doku als statischen Export ist Lobsite der einfachere Hoster: ein Befehl, nur geänderte Dateien werden hochgeladen, eine Vorschau-URL für jedes Deploy.

Häufige Fragen

Kann ich hier eine Next.js-App mit serverseitigem Rendering hosten?

Nein. Lobsite liefert Dateien aus, daher funktioniert nur ein statischer Export. Wenn Seiten getServerSideProps, Server Actions oder dynamisches Rendering nutzen, hoste sie dort, wo Next.js auf einem Server läuft.

Warum sind meine next/image-Bilder nach dem Export kaputt?

Der Standard-Bild-Loader braucht einen Server. Füge images: { unoptimized: true } zu next.config.js hinzu oder setze einen eigenen Loader, der auf ein Bild-CDN zeigt, und baue erneut.

Funktioniert meine Next.js-404-Seite?

Ja. next build schreibt 404.html aus deiner not-found-Seite (App Router) oder pages/404 (Pages Router), und Lobsite liefert sie für jede Adresse aus, die nicht existiert.

Kann ich den App Router mit einem statischen Export nutzen?

Ja. Server Components werden beim Build gerendert; Client Components laufen wie gewohnt im Browser. Nur Funktionen, die zur Laufzeit eine Anfrage brauchen, sind tabu.

Hosting für Next.js-Static-Export