next plugin cdnダウンロード - next plugin cdnソースコードのダウンロード

next plugin cdn

その他のカテゴリー

0.1.1 (March 22, 2023)

ダウンロード

Next.js プラグイン CDN

このライブラリは、ビルド時に静的アセットを指定された CDN に自動的にアップロードし、指定された CDN プレフィックスを使用するように Next.js アプリケーションを構成する Next.js のプラグインです。これにより、アセットのセットアップと最適化が簡単になり、パフォーマンスが向上します。

現在、Google Cloud Storage をサポートしていますが、将来的には AWS S3、Cloudflare などの他の CDN もサポートされる予定です。 ?

?インストール

お気に入りのパッケージマネージャーを使用してパッケージをインストールします。

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 にアップロードし、CDN プレフィックスを使用するように Next.js アプリケーションを構成します。 ?

オプション

withCDN 関数は、次のプロパティを持つオブジェクトを受け入れます。

domain : CDN のドメイン。これは、CDN_DOMAIN 環境変数の値に設定する必要があります。
provider : 使用している CDN プロバイダー (例: Google、AWS、Cloudflare など)。これは、CDN_PROVIDER 環境変数の値に設定する必要があります。
bucket : アセットがアップロードされるバケットの名前。これは、CDN_BUCKET 環境変数の値に設定する必要があります。
keyFilename : CDN プロバイダーとの認証に使用される JSON キーファイルの名前。これは、CDN_KEY_FILENAME 環境変数の値に設定する必要があります。

これらのオプションはプラグインに渡され、プラグインがアセットのアップロードと CDN プレフィックスの構成を処理します。