문서
App Router 사용하기
src 디렉토리

src 디렉토리

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

이는 애플리케이션 코드를 프로젝트의 루트에 주로 있는 프로젝트 구성 파일과 분리하며, 일부 개인과 팀이 선호하는 방식입니다.

src 디렉토리를 사용하려면, app 라우터 폴더 또는 pages 라우터 폴더를 각각 src/app 또는 src/pages로 이동하세요.

`src` 디렉토리를 사용한 예시 폴더 구조

알아두면 좋은 점

  • /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 섹션/src 접두사를 추가해야 합니다.
  • @/*와 같은 TypeScript 경로를 임포트에 사용하는 경우, tsconfig.jsonpaths 객체에 src/를 포함하도록 업데이트해야 합니다.