next plugin cdn Download - next plugin cdn Quellcode-Download

next plugin cdn

Andere Kategorien

0.1.1 (March 22, 2023)

Herunterladen

Next.js-Plugin-CDN

Diese Bibliothek ist ein Plugin für Next.js, das Ihre statischen Assets während der Erstellungszeit automatisch auf ein bestimmtes CDN hochlädt und Ihre Next.js-Anwendung für die Verwendung des angegebenen CDN-Präfixes konfiguriert. Dies erleichtert die Einrichtung und Optimierung Ihrer Assets für eine bessere Leistung.

Derzeit wird Google Cloud Storage unterstützt, für die Zukunft ist jedoch auch die Unterstützung anderer CDNs wie AWS S3, Cloudflare und mehr geplant! ?

? Installation

Installieren Sie das Paket mit Ihrem bevorzugten Paketmanager:

npm install next-plugin-cdn

oder

yarn add next-plugin-cdn

? Verwendung

Legen Sie die entsprechenden Umgebungsvariablen für Ihr Projekt fest.

Importieren Sie das Plugin in Ihre next.config.js und verwenden Sie es zum Konfigurieren Ihrer Anwendung:

 // Import the plugin and pass cdn info and credentials
// for example using env vars:
const withCDN = require ( "next-plugin-cdn" ) . default ( {
  domain : process . env . NODE_ENV === "production" && process . env . CDN_DOMAIN ,
  provider : process . env . CDN_PROVIDER ,
  bucket : process . env . CDN_BUCKET ,
  keyFilename : process . env . CDN_KEY_FILENAME ,
} ) ;


// Then just apply to your nextjs config
/** @type {import('next').NextConfig} */
const nextConfig = withCDN ( {
  output : "standalone" ,
  reactStrictMode : true ,
  swcMinify : true ,
  experimental : {
    appDir : true ,
  } ,
} ) ;

module . exports = nextConfig ;

Während des Erstellungsprozesses lädt das Plugin nun Ihre statischen Assets in das angegebene CDN hoch und konfiguriert Ihre Next.js-Anwendung für die Verwendung des CDN-Präfixes. ?

Optionen

Die withCDN-Funktion akzeptiert ein Objekt mit den folgenden Eigenschaften:

domain : Die Domain Ihres CDN. Dies sollte auf den Wert der Umgebungsvariablen CDN_DOMAIN gesetzt werden.
provider : Der CDN-Anbieter, den Sie verwenden (z. B. Google, AWS, Cloudflare usw.). Dies sollte auf den Wert der Umgebungsvariablen CDN_PROVIDER gesetzt werden.
bucket : Der Name des Buckets, in den Ihre Assets hochgeladen werden. Dies sollte auf den Wert der Umgebungsvariablen CDN_BUCKET gesetzt werden.
keyFilename : Der Name der JSON-Schlüsseldatei, die für die Authentifizierung beim CDN-Anbieter verwendet wird. Dies sollte auf den Wert der Umgebungsvariablen CDN_KEY_FILENAME gesetzt werden.

Diese Optionen werden an das Plugin übergeben, das sich dann um das Hochladen der Assets und die Konfiguration des CDN-Präfixes kümmert.