Pustaka ini adalah plugin untuk Next.js yang secara otomatis mengunggah aset statis Anda ke CDN tertentu selama waktu pembuatan dan mengonfigurasi aplikasi Next.js Anda untuk menggunakan awalan CDN yang ditentukan. Hal ini memudahkan penyiapan dan mengoptimalkan aset Anda untuk performa yang lebih baik.
Saat ini, ia mendukung Google Cloud Storage, namun dukungan direncanakan untuk CDN lain seperti AWS S3, Cloudflare, dan lainnya di masa mendatang! ?
Instal paket menggunakan manajer paket favorit Anda:
npm install next-plugin-cdn
atau
yarn add next-plugin-cdn
Tetapkan variabel lingkungan yang sesuai untuk proyek Anda.
Di next.config.js Anda, impor plugin dan gunakan untuk mengonfigurasi aplikasi Anda:
// 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 ;
Sekarang, selama proses pembangunan, plugin akan mengunggah aset statis Anda ke CDN yang ditentukan dan mengonfigurasi aplikasi Next.js Anda untuk menggunakan awalan CDN. ?
Fungsi withCDN menerima objek dengan properti berikut:
domain
: Domain CDN Anda. Ini harus disetel ke nilai variabel lingkungan CDN_DOMAIN.provider
: Penyedia CDN yang Anda gunakan (misalnya google, aws, cloudflare, dll). Ini harus disetel ke nilai variabel lingkungan CDN_PROVIDER.bucket
: Nama bucket tempat aset Anda akan diunggah. Ini harus disetel ke nilai variabel lingkungan CDN_BUCKET.keyFilename
: Nama file kunci JSON yang digunakan untuk autentikasi dengan penyedia CDN. Ini harus disetel ke nilai variabel lingkungan CDN_KEY_FILENAME.Opsi ini diteruskan ke plugin, yang kemudian menangani pengunggahan aset dan mengonfigurasi awalan CDN.
Nantikan dukungan penyedia CDN lainnya! ?
Lisensi MIT