assetPrefix

Hinweis: Das Bereitstellen 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 in einem Unterpfad wie /docs zu hosten. Wir empfehlen nicht, für diesen Anwendungsfall ein benutzerdefiniertes Asset Prefix zu verwenden.

Einrichten einer CDN

Um eine CDN einzurichten, können Sie ein Asset Prefix festlegen und Ihre CDN so konfigurieren, dass sie 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:

next.config.mjs
// @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 eine bestimmte CDN hängt von Ihrer gewählten CDN ab. Der einzige Ordner, den Sie auf Ihrer CDN hosten müssen, ist der Inhalt von .next/static/, der wie oben angegeben 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 eine CDN bereitstellen möchten, müssen Sie das Präfix selbst einführen

On this page