assetPrefix

Attention: Vercel에 배포하면 Next.js 프로젝트에 대한 글로벌 CDN이 자동으로 구성됩니다. 자산 프리픽스를 수동으로 설정할 필요가 없습니다.

Good to know: Next.js 9.5+ added support for a customizable Base Path, which is better suited for hosting your application on a sub-path like /docs. We do not suggest you use a custom Asset Prefix for this use case.

CDN(콘텐츠 전송 네트워크)을 설정하려면 자산 프리픽스를 설정하고 CDN의 오리진을 Next.js가 호스팅되는 도메인으로 해결하도록 구성할 수 있습니다.

next.config.js를 열고 assetPrefix 구성을 추가하세요:

next.config.js

const isProd = process.env.NODE_ENV === 'production'
 
module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

Next.js는 /_next/ 경로(.next/static/ 폴더)에서 로드되는 JavaScript 및 CSS 파일에 대해 자동으로 자산 프리픽스를 사용합니다. 예를 들어, 위의 구성으로 JS 청크에 대한 다음 요청은:

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

대신 다음과 같이 됩니다:

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

특정 CDN에 파일을 업로드하는 정확한 구성은 선택한 CDN에 따라 다릅니다. CDN에 호스팅해야 하는 유일한 폴더는 .next/static/의 내용이며, 위의 URL 요청에서 나타내는 대로 _next/static/으로 업로드해야 합니다. .next/ 폴더의 나머지 부분을 업로드하지 마세요, 서버 코드 및 기타 구성을 공개적으로 노출해서는 안 됩니다.

assetPrefix는 _next/static에 대한 요청을 처리하지만 다음 경로에는 영향을 미치지 않습니다:

public 폴더의 파일; 이러한 자산을 CDN을 통해 제공하려면 프리픽스를 직접 도입해야 합니다.
getServerSideProps 페이지에 대한 /_next/data/ 요청. 이러한 요청은 정적이지 않으므로 항상 기본 도메인에 대해 수행됩니다.
getStaticProps 페이지에 대한 /_next/data/ 요청. 증분 정적 생성을 지원하기 위해, 이를 사용하지 않더라도 일관성을 위해 이러한 요청은 항상 기본 도메인에 대해 수행됩니다.

next.config.js Options basePath