Statischer Export

Next.js ermöglicht den Start als statische Website oder Single-Page Application (SPA), mit der Option später Server-Features hinzuzufügen.

Bei Ausführung von next build generiert Next.js eine HTML-Datei pro Route. Durch die Aufteilung einer strikten SPA in einzelne HTML-Dateien kann Next.js unnötigen JavaScript-Code auf Client-Seite vermeiden, was die Bundle-Größe reduziert und schnellere Ladezeiten ermöglicht.

Da Next.js diesen statischen Export unterstützt, kann es auf jedem Webserver bereitgestellt werden, der statische HTML/CSS/JS-Assets servieren kann.

Gut zu wissen: Wir empfehlen die Verwendung des App Routers für erweiterte Unterstützung statischer Exporte.

Konfiguration

Um einen statischen Export zu aktivieren, ändern Sie den Ausgabemodus in next.config.js:

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

  // Optional: Ändert Links `/me` -> `/me/` und erzeugt `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Verhindert automatische Umleitung `/me` -> `/me/`, behält `href` bei
  // skipTrailingSlashRedirect: true,

  // Optional: Ändert das Ausgabeverzeichnis `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

Nach Ausführung von next build erstellt Next.js einen out-Ordner mit den HTML/CSS/JS-Assets Ihrer Anwendung.

Sie können getStaticProps und getStaticPaths verwenden, um für jede Seite in Ihrem pages-Verzeichnis eine HTML-Datei zu generieren (oder mehrere für dynamische Routen).

Unterstützte Features

Die meisten Kernfeatures von Next.js für den Aufbau statischer Websites werden unterstützt, darunter:

• Dynamische Routen mit getStaticPaths
• Prefetching mit next/link
• Preloading von JavaScript
• Dynamische Imports
• Alle Styling-Optionen (z.B. CSS Modules, styled-jsx)
• Client-seitiges Data Fetching
• getStaticProps
• getStaticPaths

Bildoptimierung

Bildoptimierung via next/image kann mit einem statischen Export verwendet werden, indem ein benutzerdefinierter Image Loader in next.config.js definiert wird. Beispielsweise können Bilder mit einem Dienst wie Cloudinary optimiert werden:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

Dieser benutzerdefinierte Loader definiert, wie Bilder von einer Remote-Quelle abgerufen werden. Beispielsweise konstruiert der folgende Loader die URL für Cloudinary:

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

Sie können dann next/image in Ihrer Anwendung verwenden und relative Pfade zu den Bildern in Cloudinary angeben:

import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

Nicht unterstützte Features

Features, die einen Node.js-Server erfordern oder dynamische Logik, die nicht während des Build-Prozesses berechnet werden kann, werden nicht unterstützt:

• Internationalized Routing
• API Routes
• Rewrites
• Redirects
• Headers
• Middleware
• Incremental Static Regeneration
• Bildoptimierung mit dem Standard-loader
• Draft Mode
• getStaticPaths mit fallback: true
• getStaticPaths mit fallback: 'blocking'
• getServerSideProps

Bereitstellung

Mit einem statischen Export kann Next.js auf jedem Webserver bereitgestellt werden, der statische HTML/CSS/JS-Assets servieren kann.

Bei Ausführung von next build generiert Next.js den statischen Export in den out-Ordner. Angenommen, Sie haben folgende Routen:

• /
• /blog/[id]

Nach next build erzeugt Next.js folgende Dateien:

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

Bei Verwendung eines statischen Hosts wie Nginx können Sie Rewrites von eingehenden Anfragen zu den korrekten Dateien konfigurieren:

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # Dies ist notwendig bei `trailingSlash: false`.
  # Kann weggelassen werden bei `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Versionsverlauf