# next.config.js

### next.config.js 파일

{% code title="next.confg.js" lineNumbers="true" %}

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

module.exports = nextConfig
```

{% endcode %}

첫번째 줄은 [JSDoc의 @type 태그 문법](https://jsdoc.app/tags-type)입니다. 중괄호 안에 있는 표현식을 읽어 타입으로 인식하죠. 바로 아랫줄에 있는 `nextConfig`가 그 타입의 대상이 됩니다.

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

#### output

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

```javascript
/** @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` 폴더에 저장됩니다.

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

module.exports = nextConfig
```

#### basePath

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

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

module.exports = nextConfig
```

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

#### images

Next.js에서 제공하는 Image 컴포넌트를 사용하면 이미지를 자동으로 최적화합니다. 이때 외부에 저장된 이미지를 사용하기 위해 추가 설정이 필요합니다. [참고](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns)

```javascript
/** @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 타입 정의를 참조합니다.&#x20;

{% code title="next-env.d.ts" lineNumbers="true" %}

```typescript
/// <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.
```

{% endcode %}

세 개의 슬래시(/)로 시작하는 문법은 TypeScript의 [트리플-슬래시 지시자 문법](https://typescript-kr.github.io/pages/triple-slash-directives.html)입니다.

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

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

주석에 나와 있듯 해당 파일은 수정하지 않아도 됩니다. [Next.js 공식 문서](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)에서는 TypeScript `v4.5.2` 이상을 사용하라고 권합니다.