src Directory

Next.js의 특별한 app 또는 pages 디렉토리를 프로젝트 루트에 두는 대신, src 디렉토리 아래에 애플리케이션 코드를 배치하는 일반적인 패턴도 지원합니다.

이 방법은 애플리케이션 코드를 프로젝트 구성 파일과 분리하며, 이는 일부 개인 및 팀에서 선호됩니다.

src 디렉토리를 사용하려면 app Router 폴더 또는 pages Router 폴더를 각각 src/app 또는 src/pages로 이동합니다.

An example folder structure with the `src` directory

참고

/public 디렉토리는 프로젝트 루트에 그대로 유지해야 합니다.

package.json, next.config.js, tsconfig.json과 같은 구성 파일은 프로젝트 루트에 그대로 유지해야 합니다.

.env.* 파일은 프로젝트 루트에 그대로 유지해야 합니다.

루트 디렉토리에 app 또는 pages가 있는 경우 src/app 또는 src/pages는 무시됩니다.

src를 사용하는 경우 /components 또는 /lib와 같은 다른 애플리케이션 폴더도 이동할 가능성이 큽니다.

Middleware를 사용하는 경우 이를 src 디렉토리에 배치해야 합니다.

Tailwind CSS를 사용하는 경우, tailwind.config.js 파일의 content 섹션 (opens in a new tab)에서 /src 접두사를 추가해야 합니다.

@/*와 같은 TypeScript 경로를 사용 중이라면, tsconfig.json의 paths 객체를 업데이트하여 src/를 포함해야 합니다.

Absolute Imports and Module Aliases MDX