assetPrefix | Next.js Deutsch

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

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

Um ein CDN einzurichten, können Sie ein Asset Prefix konfigurieren und Ihr CDN so einstellen, dass es die Ursprungsdomain auflöst, auf der Next.js gehostet wird.

Öffnen Sie next.config.js und fügen Sie die assetPrefix-Konfiguration hinzu:

next.config.js

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Verwenden Sie das CDN in der Produktion und localhost für die Entwicklung.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

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 den Rest Ihres .next/-Ordners nicht 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 Präfix selbst hinzufügen
/_next/data/-Anfragen für getServerSideProps-Seiten. Diese Anfragen werden immer gegen die Hauptdomain gestellt, da sie nicht statisch sind.
/_next/data/-Anfragen für getStaticProps-Seiten. Diese Anfragen werden immer gegen die Hauptdomain gestellt, um Inkrementelle Statische Generierung zu unterstützen, selbst wenn Sie sie nicht verwenden (für Konsistenz).