프로젝트 구성 및 파일 배치
라우팅 폴더 및 파일 규칙 외에는 Next.js는 프로젝트 파일을 어떻게 구성하고 배치할지에 대해 별다른 제약을 두지 않습니다.
이 페이지에서는 프로젝트를 구성하는 데 사용할 수 있는 기본 동작과 기능을 공유합니다.
기본적으로 안전한 파일 배치
app 디렉토리에서 중첩된 폴더 계층 구조는 라우트 구조를 정의합니다.
각 폴더는 URL 경로의 해당 세그먼트에 매핑되는 라우트 세그먼트를 나타냅니다.
그러나 폴더를 통해 라우트 구조가 정의되더라도, page.js 또는 route.js 파일이 라우트 세그먼트에 추가되기 전까지는 라우트가 공개적으로 접근할 수 없습니다.
그리고 라우트가 공개적으로 접근 가능해지더라도 page.js 또는 route.js가 반환하는 콘텐츠만 클라이언트로 전송됩니다.
이는 프로젝트 파일을 실수로 라우팅 가능하게 만들지 않고도 app 디렉토리의 라우트 세그먼트 내에 안전하게 배치할 수 있음을 의미합니다.
알아두면 좋은 점:
- 이는
pages디렉토리와 다릅니다.pages에서는 모든 파일이 라우트로 간주됩니다.app에 프로젝트 파일을 배치할 수 있지만, 반드시 그렇게 해야 하는 것은 아닙니다. 원한다면 파일을app디렉토리 외부에 보관할 수 있습니다.
프로젝트 구성 도구
Next.js는 프로젝트를 구성하는 데 도움이 되는 여러 유용한 도구를 제공합니다.
비공개 폴더
비공개 폴더는 폴더 이름 앞에 밑줄을 붙여 만들 수 있습니다: _folderName
이는 해당 폴더가 비공개 구현 세부사항임을 나타내며 라우팅 시스템에서 고려되지 않아야 함을 의미합니다. 따라서 해당 폴더와 모든 하위 폴더를 라우팅에서 제외합니다.
app 디렉토리의 파일은 기본적으로 안전하게 배치할 수 있으므로 배치를 위해 비공개 폴더가 필요하지 않습니다. 그러나 다음과 같은 경우에 유용할 수 있습니다:
- UI 로직과 라우팅 로직 분리.
- 프로젝트 전체와 Next.js 생태계에서 내부 파일을 일관되게 구성.
- 코드 편집기에서 파일 정렬 및 그룹화.
- 향후 Next.js 파일 규칙과의 잠재적 이름 충돌 방지.
알아두면 좋은 점
- 프레임워크 규칙은 아니지만, 비공개 폴더 외부의 파일도 동일한 밑줄 패턴을 사용하여 "비공개"로 표시하는 것을 고려할 수 있습니다.
- 밑줄로 시작하는 URL 세그먼트를 만들려면 폴더 이름 앞에
%5F(밑줄의 URL 인코딩 형식)를 붙이면 됩니다:%5FfolderName.- 비공개 폴더를 사용하지 않는 경우, 예상치 못한 이름 충돌을 방지하기 위해 Next.js의 특별 파일 규칙을 알아두면 도움이 됩니다.
라우트 그룹
라우트 그룹은 폴더를 괄호로 감싸서 만들 수 있습니다: (folderName)
이는 해당 폴더가 조직 목적으로만 사용되며 라우트의 URL 경로에 포함되지 않아야 함을 나타냅니다.
라우트 그룹은 다음과 같은 경우에 유용합니다:
- 라우트를 그룹으로 구성 예: 사이트 섹션, 의도 또는 팀별로.
- 동일한 라우트 세그먼트 레벨에서 중첩 레이아웃 활성화:
src 디렉토리
Next.js는 애플리케이션 코드(app 포함)를 선택적 src 디렉토리 내에 저장하는 것을 지원합니다. 이를 통해 애플리케이션 코드를 프로젝트 구성 파일(대부분 프로젝트 루트에 있음)과 분리할 수 있습니다.
모듈 경로 별칭
Next.js는 모듈 경로 별칭을 지원하여 깊게 중첩된 프로젝트 파일 간의 import를 더 쉽게 읽고 유지 관리할 수 있게 합니다.
// 이전
import { Button } from "../../../components/button";
// 이후
import { Button } from "@/components/button";프로젝트 구성 전략
Next.js 프로젝트에서 파일과 폴더를 구성하는 데 있어 "정답"이나 "오답"은 없습니다.
다음 섹션에서는 일반적인 전략에 대한 매우 개략적인 개요를 나열합니다. 가장 간단한 결론은 여러분과 팀에게 맞는 전략을 선택하고 프로젝트 전체에서 일관성을 유지하는 것입니다.
알아두면 좋은 점: 아래 예시에서는
components와lib폴더를 일반화된 플레이스홀더로 사용하고 있습니다. 이들의 이름은 프레임워크에서 특별한 의미를 갖지 않으며, 프로젝트에 따라ui,utils,hooks,styles등의 다른 폴더를 사용할 수 있습니다.
app 외부에 프로젝트 파일 저장
이 전략은 모든 애플리케이션 코드를 프로젝트 루트의 공유 폴더에 저장하고 app 디렉토리를 순수하게 라우팅 목적으로만 유지합니다.
app 내부의 최상위 폴더에 프로젝트 파일 저장
이 전략은 모든 애플리케이션 코드를 app 디렉토리의 루트에 있는 공유 폴더에 저장합니다.
기능 또는 라우트별로 프로젝트 파일 분할
이 전략은 전역적으로 공유되는 애플리케이션 코드를 루트 app 디렉토리에 저장하고, 더 구체적인 애플리케이션 코드를 해당 코드를 사용하는 라우트 세그먼트로 분할합니다.
