next.config.js Options

Next.js는 프로젝트 디렉토리의 루트에 있는 next.config.js 파일을 통해 구성할 수 있습니다(예: package.json 옆에). 기본 내보내기를 사용합니다.

next.config.js

// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* 여기에 구성 옵션 */
};
 
module.exports = nextConfig;

ECMAScript 모듈

next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다. Next.js 서버와 빌드 단계에서 사용되며, 브라우저 빌드에는 포함되지 않습니다.

ECMAScript 모듈이 필요한 경우 next.config.mjs를 사용할 수 있습니다:

next.config.mjs

// @ts-check
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* 여기에 구성 옵션 */
};
 
export default nextConfig;

함수로서의 구성

함수를 사용할 수도 있습니다:

next.config.mjs

// @ts-check
 
export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* 여기에 구성 옵션 */
  };
  return nextConfig;
};

비동기 구성

Next.js 12.1.0부터는 비동기 함수를 사용할 수 있습니다:

next.config.js

// @ts-check
 
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* 여기에 구성 옵션 */
  };
  return nextConfig;
};

단계 (phase)

phase는 구성이 로드되는 현재 컨텍스트입니다. 사용 가능한 단계를 볼 수 있습니다. 단계는 next/constants에서 가져올 수 있습니다:

next.config.js

// @ts-check
 
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
 
module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* 개발 전용 구성 옵션은 여기에 */
    };
  }
 
  return {
    /* 개발을 제외한 모든 단계에 대한 구성 옵션은 여기에 */
  };
};

TypeScript

이 기능은 Next.js canary에서 사용할 수 있습니다.

프로젝트에서 TypeScript를 사용하는 경우 next.config.ts를 사용하여 구성에서 TypeScript를 사용할 수 있습니다:

next.config.ts

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  /* 여기에 구성 옵션 */
};
 
export default nextConfig;

주석 처리된 줄은 next.config.js에서 허용하는 구성을 넣을 수 있는 위치입니다. 이 구성들은 이 파일에 정의되어 있습니다.

그러나 어떤 구성도 필수는 아니며, 각 구성이 무엇을 하는지 이해할 필요는 없습니다. 대신 이 섹션에서 활성화하거나 수정해야 하는 기능을 검색하면 무엇을 해야 하는지 알려줄 것입니다.

대상 Node.js 버전에서 사용할 수 없는 새로운 JavaScript 기능을 사용하지 마세요. next.config.js는 Webpack이나 Babel에 의해 파싱되지 않습니다.

이 페이지는 사용 가능한 모든 구성 옵션을 문서화합니다:

userAgent appDir