Next.js statische export

Publiceer
Next.js statische websites

Exporteer uw Next.js-app naar statische HTML en assets, upload de out-directory en publiceer wereldwijd zonder een Node.js-server te draaien.

Zie de installatiehandleiding
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
Statische export ingeschakeld

Supportmatrix voor static export

Controleer voordat u out uploadt of de app past bij het static export-model.

Werkt goed

  • Statische routes die tijdens de build worden gegenereerd
  • App Router-pagina's die statisch kunnen worden weergegeven
  • Pages Router getStaticProps / getStaticPaths
  • Client-side data fetching na hydration
  • next/link, dynamic imports, CSS Modules en statische assets

Heeft een andere runtime nodig

  • API routes en route handlers die serveruitvoering nodig hebben
  • Middleware, rewrites, redirects en custom headers
  • getServerSideProps en request-time rendering
  • Incrementele statische regeneratie
  • Standaard next/image-optimalisatie zonder een aangepaste statische strategie

Gebruik Next.js wanneer u het framework wilt, niet de server

Behoud het framework, laat de server vallen

Met Next.js static export behoudt u file-based routing, layouts, metadata, rendering tijdens de build, CSS-ondersteuning en client-side React waar u dat nodig hebt.

De output bestaat nog steeds uit bestanden. Dat maakt het geschikt voor marketingwebsites, documentatie, portfolio's, productpagina's, content hubs en andere pagina's die tijdens de build kunnen worden voorbereid.

Snel als statische bestanden

Vooraf gerenderde HTML kan agressief in de cache worden opgeslagen en rechtstreeks vanaf wereldwijde netwerkpunten worden bediend zonder op een renderserver te hoeven wachten.

Minder operationele overhead

Geen Node-runtime betekent minder bewegende delen, eenvoudigere deploy-artefacten en minder verschil tussen build en productie.

Duidelijke runtime-grens

Als een pagina servercode nodig heeft, moet u die niet in static export forceren. Als de pagina vooraf kan worden gebouwd, is de map out een helder artefact om te publiceren.

Veel voorkomende statische exportblokkers

Blocker 01

De build faalt door server-only functies

Verwijder request-time API's uit de geëxporteerde route, verplaats ze naar een aparte backend of deploy dat onderdeel op een platform met server-runtime.

Blocker 02

Afbeeldingen werken in dev, maar mislukken na het exporteren

De standaard next/image-optimalisatie verwacht een server. Gebruik images.unoptimized, een aangepaste loader of gewone statische afbeeldingsassets.

Blocker 03

Dynamische routes ontbreken

Genereer de routelijst op build-time met generateStaticParams in de App Router of getStaticPaths in de Pages Router.

Blocker 04

Redirects of rewrites worden niet toegepast

Next.js redirects en rewrites maken geen deel uit van static export. Gebruik waar mogelijk een statische paginastructuur, client-side navigatie of redirects op platformniveau.

Checklist voor Next.js static export

01

Stel output: 'export' in

Laat Next.js tijdens de build statische HTML genereren, in plaats van next start of een gehoste Node.js-runtime te verwachten.

output: 'export'
02

Build en controleer /out

Voer de productiebuild uit en controleer of de map out de gerenderde pagina's, assets, 404-pagina's en statische bestanden bevat die u wilt publiceren.

npm run build
03

Upload en test routes

Upload de out-directory en controleer daarna geneste paden, statische assets en niet-geoptimaliseerde afbeeldingen op de gepubliceerde website.

Veelgestelde vragen over de publicatie van Next.js

Waarom faalt de Next.js Image-component na export?

De standaardpipeline voor image optimization verwacht een server. Voor static export stelt u images.unoptimized in op true in next.config.js.

Werken API-routes of getServerSideProps hier?

Nee. Static export verwijdert server-side runtime-functies zoals API routes, middleware en getServerSideProps. Verplaats die logica naar een aparte backend of serverless service.

Kan ik de app-router gebruiken?

Ja, zolang de route statisch kan worden weergegeven en niet afhankelijk is van dynamische server-only API's zoals headers of cookies.

Hoe moet ik omgaan met dynamische inhoud?

Haal het waar mogelijk tijdens de build op, of laad het client-side nadat de pagina is gehydrateerd. Static export werkt het beste wanneer de HTML vooraf kan worden voorbereid.

Moet ik .next of out uploaden?

Upload out voor output: 'export'. De map .next is een interne build-map voor Next.js en is niet het statische exportartefact dat u wilt publiceren.

Is dit een vervanging voor Vercel Next.js-hosting?

Het is geschikt voor statische export, niet voor elke Next.js-app. Als u vertrouwt op SSR, middleware, ISR, serveracties of API-routes, heeft u een runtime nodig die deze functies ondersteunt.