So verwenden Sie ein Drittanbieter-CDN, um die Hosting-Kosten für Next.js auf Vercel zu reduzieren

Das Next.js-Framework ist die Top-Wahl für die Erstellung leistungsstarker React-Anwendungen. Vercel, das Mutterunternehmen von Next.js, bietet eine hervorragende Deployment-Erfahrung und ist damit die empfohlene Plattform für das Deployment von Next.js.

Diese Bequemlichkeit kann jedoch mit erheblichen versteckten Kosten verbunden sein.

Vercels Fast Data Transfer und seine Bandbreitenkosten

Wenn Sie ein Next.js-Projekt über Vercel deployen, werden alle Daten, die über sein Edge-Netzwerk übertragen werden – seien es Seiten, API-Routen oder statische Assets –, als "Fast Data Transfer" gezählt. Dies ist im Wesentlichen der CDN-Service von Vercel.

Vercels kostenloser Hobby-Plan beinhaltet 100 GB Fast Data Transfer pro Monat, was für persönliche Projekte oder kleine Anwendungen ausreichen mag. Für Projekte mit etwas höherem Traffic oder bei plötzlichen Traffic-Spitzen fallen jedoch zusätzliche Kosten von etwa 0,15 $ pro GB an, sobald Sie das kostenlose Kontingent überschreiten.

Im Vergleich zu anderen großen Cloud-Dienstanbietern ist dieser Preis erheblich höher:

• Amazon CloudFront ist mit einem Bandbreitenpreis von 0,085 $/GB etwa halb so teuer wie Vercel.
• Selbst AWS S3, das kein CDN beinhaltet (und daher typischerweise teurere Datenübertragung hat), kostet nur 0,09 $/GB und ist damit immer noch günstiger als Vercel.
• Cloudflare bietet kostenlose CDN-Bandbreite.

Dies kann unbeabsichtigt erheblichen Druck auf Ihre Betriebskosten ausüben.

So umgehen Sie Vercels Fast Data Transfer

Glücklicherweise erlaubt uns die Flexibilität des Next.js-Frameworks, Vercels Fast Data Transfer zu umgehen und den Traffic für statische Assets über einen günstigeren Drittanbieter-CDN-Service abzuwickeln.

Der Kern dieser Lösung liegt in der Änderung der Next.js-Konfigurationsdatei next.config.js und der Anpassung des Build- und Deployment-Prozesses des Projekts.

Schritt 1: Konfigurieren Sie assetPrefix

assetPrefix ist ein wichtiger Parameter in next.config.js, mit dem Sie ein URL-Präfix für alle statischen Assets Ihrer Next.js-Anwendung (wie JavaScript, CSS, Bilder usw.) festlegen können. Indem Sie es auf Ihre CDN-Adresse setzen, wird Next.js beim Generieren von HTML-Seiten automatisch die Referenzen zu statischen Assets auf Ihr CDN verweisen.

Hier ist ein Konfigurationsbeispiel, vorausgesetzt, Sie haben Ihre statischen Assets auf ein anderes CDN hochgeladen und greifen über die benutzerdefinierte Domäne https://cdn.yourdomain.com darauf zu:

const nextConfig = {
  // assetPrefix nur in der Produktionsumgebung aktivieren
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
};

export default nextConfig;

Wichtige Punkte:

• Der Wert von assetPrefix sollte die Zugriffs-URL Ihres CDN-Services sein.
• Es wird empfohlen, diese Konfiguration nur in der Produktionsumgebung (process.env.NODE_ENV === 'production') zu aktivieren, um die lokale Entwicklung nicht zu beeinträchtigen.

Schritt 2: Bildoptimierung handhaben

Standardmäßig optimiert die Next.js <Image>-Komponente Bilder in Echtzeit über die Server von Vercel. Das bedeutet, dass selbst wenn Sie ein assetPrefix festlegen, Bildanfragen immer noch über den Dienst von Vercel laufen und Bandbreitenkosten verursachen.

Um sicherzustellen, dass Bilder ebenfalls vollständig über Ihr eigenes CDN bedient werden, müssen Sie die integrierte Bildoptimierungsfunktion von Next.js in next.config.js deaktivieren:

const nextConfig = {
  // assetPrefix nur in der Produktionsumgebung aktivieren
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

Nachdem Sie images.unoptimized = true gesetzt haben, verwendet die src der <Image>-Komponente direkt den in Ihrem assetPrefix definierten Pfad, wodurch sichergestellt wird, dass der Bildverkehr vollständig von Ihrem Drittanbieter-CDN abgewickelt wird.

Schritt 3: Bauen und Hochladen

Nach Abschluss der Konfiguration erfordert Ihr Deployment-Prozess einige Anpassungen:

1. Projekt normal bauen: Führen Sie npm run build aus. Nach Abschluss des Builds werden alle für das CDN zu uploadenden statischen Assets im Verzeichnis .next/static generiert.
2. Auf das CDN hochladen: Sie müssen alle Dateien aus dem Verzeichnis .next/static auf Ihren Drittanbieter-CDN-Service hochladen. Es ist wichtig sicherzustellen, dass die Dateipfade nach dem Hochladen mit dem in assetPrefix gesetzten Pfad übereinstimmen. Zum Beispiel sollte die lokale Datei .next/static/css/main.css auf dem CDN unter https://cdn.yourdomain.com/_next/static/css/main.css zugänglich sein. Das bedeutet, dass Sie das Verzeichnis static als Verzeichnis _next/static in Ihrem CDN-Bucket hochladen müssen.
3. Die Anwendung deployen: Laden Sie schließlich den Rest der Build-Ausgabe, ausgenommen .next/static, auf eine Plattform wie Vercel hoch.

Mit diesen Schritten haben Sie den Datenverkehr für statische Assets Ihres Next.js-Projekts erfolgreich auf ein kostengünstigeres CDN übertragen und damit potenziell hohe Bandbreitenrechnungen von Vercel effektiv vermieden.

Gibt es eine einfachere Lösung?

Wenn Ihnen der manuelle Prozess der Konfiguration und Verwaltung eines CDN zu umständlich ist, Sie aber dennoch eine kostengünstigere Deployment-Lösung als Vercel wünschen, dann ist Leapcell eine erwägenswerte Option.

Leapcell bietet ebenfalls ein One-Click-Deployment für Next.js-Projekte und verfügt über eine integrierte globale CDN-Akzelerationsfunktion, die keine manuelle Konfiguration erfordert.

Im Gegensatz zu Vercel ist der CDN-Akzelerationsservice von Leapcell völlig kostenlos, ohne Sorge vor zusätzlichen Bandbreitengebühren.

Wir sind bestrebt, eine entwicklerfreundlichere und gewissenhaftere Alternative zu Vercel zu sein.

Besuchen Sie Leapcell jetzt, um es selbst zu erleben.