[next 14 공식문서 부시기] 2.7 프로젝트 구조 (Route Groups, Private Folders)

프로젝트 구조

 

라우팅 폴더 및 파일 규칙 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 다양한 기능과 전략이 존재합니다.

Safe colocation by default

 

Router 구조가 폴더를 통해 정의되더라도 page.js 또는 Route.js 파일이 경로 세그먼트에 추가될 때까지 경로에 공개적으로 액세스할 수 없습니다. 또한 공개적으로 액세스 가능하도록 설정된 경우에도 page.js 또는 Route.js 에서 반환된 콘텐츠만 클라이언트로 전송됩니다.

※ 즉 프로젝트 파일이 앱 디렉터리의 경로 세그먼트 내에 실수로 라우팅되지 않고 안전하게 같은 위치에 배치될 수 있음을 의미합니다.

Route Groups

Route Groups 은 폴더를 괄호로 묶어 생성할 수 있습니다.폴더가 조직화 목적으로 사용되며 경로의 URL 경로에 포함되지 않습니다.

주요 사용법

• 같은 경로 구조 내에서 특정 레이아웃을 공유 및 분리시킬 때 사용 가능
• 의도적으로 그룹화 시키는 용도로 사용가능
• 여러가지의 루트 레이아웃을 만들때 사용
  • 최상위 layout.js파일을 제거하고 layout.js각 경로 그룹 내에 파일을 추가 사용 가능

Private Folders

Private Folders는 폴더 앞에 밑줄을 붙여 생성할 수 있습니다. 폴더를 비공개로 처리해 폴더와 모든 하위 폴더를 라우팅에서 제외합니다.

※기본적으로 App 디렉터리의 파일들은 안전하게 공동 배치될 수 있으므로 파일들을 공동 배치할 시 개인 Private Folders 가 필요하지 않습니다. 그러나 다음과 같은 경우에 유용할 수 있습니다.

 

• 라우팅 로직과 UI 로직을 분리해서 사용할 수 있습니다.
• 프로젝트와 내부 파일을 일관되게 구성할 수 있습니다.
• 향후 Next.js 파일 규칙과의 잠재적인 이름 지정 충돌을 방지합니다.

src 폴더 지원

 

Next.js 는 선택적으로 src 디렉터리 내에 애플리케이션 코드(App 포함) 저장을 지원합니다. 프로젝트 루트에 있는 프로젝트 구성 파일들에서 애플리케이션 코드를 구분할 때 사용할 수 있습니다.

Module Path Aliases

 

깊게 중첩된 프로젝트 파일 전체에서 가져오기를 더 쉽게 읽고 유지 관리할 수 있도록 하는 Path Aliases을 지원합니다.

// before
import { Button } from '../../../components/button'

// after
import { Button } from '@/components/button'

대표적인 프로젝트 구성 전략

 

1. 앱 외부에 프로젝트 파일 저장

 

2. 앱 내부의 최상위 폴더에 프로젝트 파일을 저장

 

3. 기능이나 경로별로 프로젝트 파일 분할