Project Organization and File Colocation
Next.js는 라우팅 폴더 및 파일 규칙 외에는 프로젝트 파일을 조직하고 배치하는 방법에 대해 의견이 없습니다.
이 페이지에서는 프로젝트를 조직하는 기본 동작과 기능을 공유합니다.
Safe colocation by default
기본적으로 안전한 배치
app 디렉토리에서 중첩된 폴더 계층 구조는 라우트 구조를 정의합니다.
각 폴더는 URL 경로에 해당하는 경로 세그먼트를 나타냅니다.
그러나 경로 구조가 폴더를 통해 정의되더라도 page.js 또는 route.js 파일이 경로 세그먼트에 추가되지 않으면 경로는 공개적으로 접근할 수 없습니다.
또한, 경로가 공개적으로 접근 가능하게 되어도 page.js 또는 route.js에 의해 반환된 콘텐츠만 클라이언트에 전송됩니다.
이것은 프로젝트 파일이 app 디렉토리의 경로 세그먼트 내에서 안전하게 배치되어 실수로 라우팅되지 않도록 할 수 있음을 의미합니다.
참고:
- 이는
pages디렉토리와는 다르며,pages의 모든 파일은 경로로 간주됩니다.- 프로젝트 파일을
app에 배치할 수 있지만 반드시 그렇게 해야 하는 것은 아닙니다. 원한다면 app 디렉토리 외부에 저장할 수 있습니다.
Project organization features
프로젝트 조직 기능
Next.js는 프로젝트를 조직하는 데 도움이 되는 몇 가지 기능을 제공합니다.
Private Folders
비공개 폴더는 폴더 이름 앞에 밑줄을 추가하여 생성할 수 있습니다: _folderName
이는 폴더가 비공개 구현 세부 사항임을 나타내며 라우팅 시스템에서 고려되지 않도록 하여 폴더와 해당 하위 폴더를 라우팅에서 제외합니다.
app 디렉토리의 파일은 기본적으로 안전하게 배치할 수 있으므로 비공개 폴더는 배치에 필요하지 않습니다. 그러나 다음과 같은 경우에 유용할 수 있습니다:
- UI 로직을 라우팅 로직과 분리
- 프로젝트와 Next.js 생태계 전반에 걸쳐 내부 파일을 일관되게 조직
- 코드 편집기에서 파일 정렬 및 그룹화
- 향후 Next.js 파일 규칙과의 잠재적 이름 충돌 방지
참고
- 프레임워크 규칙은 아니지만 비공개 폴더 외부의 파일을 밑줄 패턴을 사용하여 "비공개"로 표시하는 것도 고려할 수 있습니다.
- 폴더 이름 앞에
%5F(밑줄의 URL 인코딩 형식)를 추가하여 밑줄로 시작하는 URL 세그먼트를 만들 수 있습니다:%5FfolderName.- 비공개 폴더를 사용하지 않는 경우, 예상치 못한 이름 충돌을 방지하기 위해 Next.js 특수 파일 규칙을 아는 것이 도움이 될 수 있습니다.
Route Groups
Route Group은 폴더 이름을 괄호로 묶어 생성할 수 있습니다: (folderName)
이는 폴더가 조직 목적으로 사용되며 경로의 URL 경로에 포함되지 않아야 함을 나타냅니다.
Route Group은 다음과 같은 경우에 유용합니다:
- 경로를 그룹으로 조직 예: 사이트 섹션, 의도 또는 팀별로 그룹화
- 동일한 경로 세그먼트 레벨에서 중첩 레이아웃 활성화:
src Directory
Next.js는 선택적 src 디렉토리 내에 애플리케이션 코드(포함 app)를 저장하는 것을 지원합니다. 이를 통해 애플리케이션 코드를 프로젝트 구성 파일과 분리할 수 있습니다.
Module Path Aliases
Next.js는 Module Path Aliases를 지원하여 깊게 중첩된 프로젝트 파일 간의 가져오기를 더 쉽게 읽고 유지 관리할 수 있습니다.
// before
import { Button } from '../../../components/button'
// after
import { Button } from '@/components/button'Project organization strategies
프로젝트 조직 전략
Next.js 프로젝트에서 파일과 폴더를 조직하는 데 "옳은" 또는 "그른" 방법은 없습니다.
다음 섹션에서는 일반적인 전략에 대한 매우 높은 수준의 개요를 나열합니다. 가장 간단한 요점은 귀하와 귀하의 팀에 맞는 전략을 선택하고 프로젝트 전반에 걸쳐 일관성을 유지하는 것입니다.
참고: 아래 예제에서는
components와lib폴더를 일반적인 자리 표시자로 사용하며, 그 이름은 특별한 프레임워크 의미가 없으며 프로젝트에서는ui,utils,hooks,styles등 다른 폴더를 사용할 수 있습니다.
Store project files outside of app
이 전략은 모든 애플리케이션 코드를 프로젝트 루트의 공유 폴더에 저장하고 app 디렉토리는 순전히 라우팅 목적으로 유지합니다.
Store project files in top-level folders inside of app
이 전략은 모든 애플리케이션 코드를 app 디렉토리 루트의 공유 폴더에 저장합니다.
Split project files by feature or route
이 전략은 루트 app 디렉토리에 전역적으로 공유되는 애플리케이션 코드를 저장하고, 특정 경로 세그먼트에 사용되는 애플리케이션 코드를 분할합니다.
