src#

• 상위 메뉴: File-system conventions
• 전체 목차: Next.js 학습 문서

학습 목표#

• 애플리케이션 코드를 src 아래로 옮기면서 root 설정 파일 경계를 유지한다.
• root app/pages와 src/app/src/pages의 우선순위를 이해한다.

핵심 개념 및 설명#

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

이는 대부분 개인과 팀이 선호하는 프로젝트 루트에 있는 프로젝트 구성 파일과 애플리케이션 코드를 분리한다.

src 폴더를 사용하려면 app 라우터 폴더 또는 pages 라우터 폴더를 각각 src/app 또는 src/pages로 이동한다.

알아두면 좋은 점:

- /public 디렉터리는 프로젝트의 루트에 남아 있어야 한다.

- package.json,next.config.js 및 tsconfig.json와 같은 구성 파일은 프로젝트 루트에 남아 있어야 한다.

- .env.* 파일은 프로젝트 루트에 남아 있어야 한다.

- 루트 디렉터리에 app 또는 pages가 있으면 src/app 또는 src/pages는 무시된다.

- src를 사용하는 경우 /components 또는 /lib와 같은 다른 응용 프로그램 폴더도 이동할 수도 있다.

- 프록시를 사용하는 경우 src 폴더 안에 있는지 확인한다.

- Tailwind CSS를 사용하는 경우 콘텐츠 섹션의 tailwind.config.js 파일에 /src 접두사를 추가해야 한다.

- @/*와 같은 가져오기에 TypeScript 경로를 사용하는 경우 src/를 포함하도록 tsconfig.json의 paths 객체를 업데이트해야 한다.

예제 및 데모 설계#

• Phase 2에서 root app을 src/app으로 이동하고 설정·환경 파일이 root에 남는지 확인한다.
• 중복 app을 잠시 두어 root 쪽이 우선되는 현상을 확인한다.

연습 문제#

1. src를 써도 root에 남겨야 하는 것은?

• A. public
• B. app
• C. components

챕터 요약#

• src/app은 root app의 대안이다.
• public과 설정·환경 파일은 root에 둔다.
• root app이 존재하면 src/app은 무시된다.
• Proxy는 선택한 src 구조 안에 둔다.
• alias와 Tailwind 경로도 함께 조정한다.