assetPrefix

Hinweis: Das Deployment auf Vercel konfiguriert automatisch ein globales CDN für Ihr Next.js-Projekt. Sie müssen kein Asset Prefix manuell einrichten.

Wissenswert: Next.js 9.5+ hat Unterstützung für einen anpassbaren Base Path hinzugefügt, der besser geeignet ist, um Ihre Anwendung in einem Unterpfad wie /docs zu hosten. Wir empfehlen nicht, für diesen Anwendungsfall ein benutzerdefiniertes Asset Prefix zu verwenden.

Einrichtung eines CDN

Um ein CDN einzurichten, können Sie ein Asset Prefix festlegen und Ihr CDN so konfigurieren, dass es auf die Domain verweist, auf der Next.js gehostet wird.

Öffnen Sie next.config.mjs und fügen Sie die assetPrefix-Konfiguration basierend auf der Phase hinzu:

// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'

export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
  }
  return nextConfig
}

Next.js verwendet Ihr Asset Prefix automatisch für die JavaScript- und CSS-Dateien, die es aus dem /_next/-Pfad (.next/static/-Ordner) lädt. Mit der obigen Konfiguration würde beispielsweise die folgende Anfrage für einen JS-Chunk:

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

stattdessen zu:

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

Die genaue Konfiguration für das Hochladen Ihrer Dateien auf ein bestimmtes CDN hängt von Ihrem gewählten CDN ab. Der einzige Ordner, den Sie auf Ihrem CDN hosten müssen, ist der Inhalt von .next/static/, der wie oben gezeigt als _next/static/ hochgeladen werden sollte. Laden Sie nicht den Rest Ihres .next/-Ordners hoch, da Sie Ihren Servercode und andere Konfigurationen nicht öffentlich zugänglich machen sollten.

Während assetPrefix Anfragen an _next/static abdeckt, beeinflusst es nicht die folgenden Pfade:

• Dateien im public-Ordner; wenn Sie diese Assets über ein CDN bereitstellen möchten, müssen Sie das Prefix selbst einführen