assetPrefix

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

알아두면 좋은 점: Next.js 9.5+ 버전에서는 사용자 정의 가능한 Base Path를 지원합니다. 이는 /docs와 같은 하위 경로에서 애플리케이션을 호스팅하는 데 더 적합합니다. 이 용도로 사용자 정의 Asset Prefix를 사용하는 것을 권장하지 않습니다.

CDN 설정하기

CDN을 설정하려면 asset prefix를 설정하고 CDN의 원본이 Next.js가 호스팅된 도메인을 해결하도록 구성할 수 있습니다.

next.config.mjs를 열고 단계에 따라 assetPrefix 설정을 추가하세요:

next.config.mjs

// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from "next/constants";
 
export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER;
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    assetPrefix: isDev ? undefined : "https://cdn.mydomain.com",
  };
  return nextConfig;
};

Next.js는 /_next/ 경로(.next/static/ 폴더)에서 로드하는 JavaScript와 CSS 파일에 대해 자동으로 asset prefix를 사용합니다. 예를 들어, 위의 설정에서 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을 통해 제공하려면 직접 접두사를 추가해야 합니다

appDir basePath