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 접두사 구성을 처리합니다.