1️next.config.js

https://nextjs.org/docs/app/api-reference/next-config-js

next.config.js 파일

next.confg.js

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

첫번째 줄은 JSDoc의 @type 태그 문법입니다. 중괄호 안에 있는 표현식을 읽어 타입으로 인식하죠. 바로 아랫줄에 있는 nextConfig가 그 타입의 대상이 됩니다.

기본적으로 nextConfig는 빈 객체 상태입니다. 모든 설정 값을 이해하고 넘어가기엔 어려움이 있습니다. 마이그레이션에 필요한 몇가지 값만 이해해봅시다.

output

빌드 이후 생성된 파일을 어디에 둘지 결정하는 설정입니다. 각 설정에 따라 어떤 환경에서 Next.js를 운용할지 결정할 수 있습니다. 세가지 경우가 존재합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // undefined 혹은 'export' 가능
}

module.exports = nextConfig

• undefined: 아무것도 설정하지 않았을 때 지정되는 기본 값입니다. .next 폴더에 빌드됩니다. Vercel과 같은 호스팅 서비스에서 사용할 때 쓰입니다.

• 'standalone': .next/standalone 폴더에 빌드됩니다. 도커 컨테이너에 셀프 호스팅하는 경우에 쓰일 수 있습니다.

• 'export': out 폴더에 빌드됩니다. 정적인 HTML/CSS/JS만 담깁니다. 노드 서버 없이 셀프 호스팅하는 경우에 쓰일 수 있습니다.

distDir

.next가 아닌 폴더 이름을 사용하도록 만들어주는 설정입니다. 아래와 같이 사용할 수 있습니다. 이 경우에 빌드이후 생성된 파일이 build 폴더에 저장됩니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: 'build'
}

module.exports = nextConfig

basePath

앱의 경로(path) 접두사를 지정하는 설정입니다. 예를 들어 '' (기본값인 빈 문자열) 대신 /docs를 사용하려면 아래와 같이 변경하면 됩니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/docs',
}

module.exports = nextConfig

<Link> 컴포넌트에서는 자동으로 /docs를 붙여줍니다. 추가로 변경할 필요가 없습니다. 하지만 <Image> 컴포넌트에 src 프로퍼티에는 /docs를 붙여줘야 합니다.

images

Next.js에서 제공하는 Image 컴포넌트를 사용하면 이미지를 자동으로 최적화합니다. 이때 외부에 저장된 이미지를 사용하기 위해 추가 설정이 필요합니다. 참고

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

module.exports = nextConfig

next-env.d.ts 파일

Next.js 프로젝트에서 TypeScript를 사용하기 위한 설정 파일입니다. 이 파일은 Next.js의 기본 기능과 이미지 타입에 대한 TypeScript 타입 정의를 참조합니다.

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

세 개의 슬래시(/)로 시작하는 문법은 TypeScript의 트리플-슬래시 지시자 문법입니다.

/// <reference types="next" />는 Next.js의 기본 타입 정의를 참조합니다. 이는 Next.js의 API와 컴포넌트에 대한 TypeScript 타입을 제공합니다.

/// <reference types="next/image-types/global" />는 Next.js의 이미지 타입에 대한 정의를 참조합니다. 이는 Next.js의 이미지 최적화 기능을 사용할 때 필요한 타입을 제공합니다.

주석에 나와 있듯 해당 파일은 수정하지 않아도 됩니다. Next.js 공식 문서에서는 TypeScript v4.5.2 이상을 사용하라고 권합니다.