next plugin cdn下載 - next plugin cdn原始碼下載

next plugin cdn

其他類別

0.1.1 (March 22, 2023)

下載

Next.js 外掛程式 CDN

該庫是 Next.js 的一個插件，它會在建置時自動將靜態資源上傳到指定的 CDN，並將您的 Next.js 應用程式配置為使用指定的 CDN 前綴。這使得您可以輕鬆設定和優化您的資產以獲得更好的效能。

目前，它支援 Google Cloud Storage，但計劃將來支援其他 CDN，例如 AWS S3、Cloudflare 等！？

？安裝

使用您最喜歡的套件管理器安裝套件：

npm install next-plugin-cdn

或者

yarn add next-plugin-cdn

？用法

為您的專案設定適當的環境變數。

在 next.config.js 中，導入插件並使用它來配置您的應用程式：

 // 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 ;

現在，在建置過程中，該外掛程式會將您的靜態資產上傳到指定的 CDN 並將您的 Next.js 應用程式配置為使用 CDN 前綴。？

選項

withCDN 函數接受具有以下屬性的物件：

domain ：您的 CDN 的網域。應將其設定為 CDN_DOMAIN 環境變數的值。
provider ：您正在使用的 CDN 提供者（例如，google、aws、cloudflare 等）。應將其設定為 CDN_PROVIDER 環境變數的值。
bucket ：您的資產將上傳到的儲存桶的名稱。應將其設定為 CDN_BUCKET 環境變數的值。
keyFilename ：用於向 CDN 提供者進行驗證的 JSON 金鑰檔案的名稱。應將其設定為 CDN_KEY_FILENAME 環境變數的值。

這些選項將傳遞給插件，然後插件負責上傳資產並配置 CDN 前綴。