> For the complete documentation index, see [llms.txt](https://book.hajoeun.dev/friendly-next-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://book.hajoeun.dev/friendly-next-js/part-2/next.js-1/next.config.js.md).

# 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` 이상을 사용하라고 권합니다.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://book.hajoeun.dev/friendly-next-js/part-2/next.js-1/next.config.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.