Project Organization and File Colocation
(프로젝트 구성과 파일 배치)
라우팅 폴더 및 파일 컨벤션 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 (의견이 없다.)(unopinionated, 어떤 뜻인지 감이 잘 안온다..)
이 페이지는 프로젝트를 구성하는데 사용할 수 있는 기본 동작 및 기능을 공유한다.
- Safe colocation by default (기본적으로 안전한 배치)
- Project organization features (프로젝트 구성 기능)
- Project organization strategies (프로젝트 구성 전략)
Safe colocation by default : 기본적으로 안전한 배치
앱 디렉토리에서 중첩된 폴더 계층 구조는 route 구조를 정의한다.
각 폴더는 URL 경로의 해당 세그먼트에 매핑된 route 세그먼트를 나타낸다.
그러나 폴더를 통해 route 구조를 정의하더라도 page.js 또는 route.js 파일이 route 세그먼트에 추가될 때 까지 공개적으로 접근 할 수 없다.
그리고 route가 공개적으로 접근할 수 있는 경우에도 page.js나 route.js에서 반환되는 컨텐츠만 클라이언트에게 전송된다.
즉, 실수로 라우팅할 수 없는 상태에서 프로젝트 파일을 app 디렉토리의 route 세그먼트 내에 안전하게 배치할 수 있다.
* 알아두면 좋은것
- 이것은 페이지의 모든 파일이 route로 간주되는 page 디렉토리와 다르다.
- app에서 프로젝트 파일을 찾을 수 있지만 그럴 필요는 없다. 원하는 경우 app 디렉토리 외부에 보관할 수 있다.
Project organization features : 프로젝트 구성 기능
Next.js는 프로젝트를 구성하는 데 도움이 되는 여러 기능을 제공한다.
Private Folders
폴더 앞에 밑줄을 붙여서 private 폴더로 만들 수 있다 : _folderName
이것은 폴더가 private 구현 세부 정보이므로 라우팅 시스템에서 고려하면 안되고, 따라서 폴더와 모든 하위 폴더를 라우팅에서 제외하도록 선택할 수 있다.
app 디렉토리의 파일은 기본적으로 안전하게 배치할 수 있으므로 배치에는 private 폴더가 필요하지 않다. 그러나 다음과 같은 경우 유용하게 사용 가능하다 :
- UI 로직을 라우팅 로직으로부터 분리할 때
- 프로젝트 및 Next.js 환경(ecosystem) 전반에 걸쳐 내부 파일을 일관되게 구성할 때
- 코드 편집기에서 파일 정렬 및 그룹화
- 미래에 추가될 Next.js 파일 컨벤션과 잠재적인 이름 지정 충돌 방지
* 알아두면 좋은것
- 프레임워크 컨벤션은 아니지만, 위와 동일한 밑줄 패턴을 사용하여 private 폴더 외부의 파일을 private으로 표시할 수 있다.
- 폴더 이름 앞에 %5F(URL로 인코딩된 밑줄형식)를 붙여서 밑줄로 시작하는 URL 세그먼트를 만들 수 있다 : %5FfolderName
- private 폴더를 사용하지 않는 경우 혹시모를 이름 충돌을 방지하기 위해 Next.js 특수 파일 컨벤션을 알아두면 도움이 된다.
Route Groups
소괄호 안에 파일이름을 감싸서 Route groups를 만들 수 있다 : (folderName)
이것은 해당 폴더는 조직을 구성하는것이 목적이며, route의 URL 경로에 포함되서는 안된다는 것을 나타낸다.
Route groups는 다음 상황에 유용하다 :
- routes를 그룹으로 조직할 때, 예를 들면 사이트 섹션별, 의도별 또는 팀별로
- 동일한 route 세그먼트 레벨에서 중첩된 레이아웃 활성화할 때 :
- 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩된 레아이웃 작성할 때
- 공통 세그먼트의 routes 하위 집합에 레이아웃 추가할 때
src Directory
Next.js는 애플리케이션 코드(app 포함)를 (선택적으로 생성하는) src 디렉토리에 저장할 수 있다. 이것은 대부분 프로젝트의 root에 있는 프로젝트 구성 파일에서 애플리케이션 코드를 분리한다.
Module Path Aliases : 모듈 경로 별칭
Next.js는 깊이 중첩된 프로젝트 파일에서 import를 쉽게 읽고 유지할 수 있도록 모듈 경로 별칭(Module Path Aliases)을 지원한다.
// before
import { Button } from '../../../components/button'
// after
import { Button } from '@/components/button'
Project organization strategies : 프로젝트 구성 전략
Next.js 프로젝트에서 사용자 자신의 파일과 폴더를 구성할 때 옳은 방법이나 잘못된 방법은 없다.
이 섹션에서는 일반적인 전략에 대한 매우 높은 수준의 개요가 나와있다. 가장 간단한 방법은 자신과 팀에 맞는 전략을 선택하고 프로젝트 전반에 걸쳐 일관성을 유지하는 것이다.
* 알아두면 좋은것 : 아래 예제에서는 components 와 lib 폴더를 일반화된 표시자(placeholder)로 사용하고 있고 해당 이름은 특별한 프레임워크적 의미가 없으며 프로젝트에서 ui, utils, hook, style 등의 다른 폴더이름도 사용할 수 있다.
Store project files outside of app
app 외부에 프로젝트 파일 저장
이 전략은 모든 애플리케이션 코드를 프로젝트 root 안의 공유 폴더에 저장하고 라우팅 목적으로만 app 디렉토리를 유지한다.
Store project files in top-level folders inside of app
app 최상위 폴더에 프로젝트 파일 저장
이 전략은 모든 애플리케이션 코드를 app 디렉토리의 root에 있는 공유 폴더에 저장한다.
Split project files by feature or route
기능이나 route에 따라 프로젝트 파일 분리
이 전략은 전체적으로 공유하는 애플리케이션 코드를 root app 디렉토리에 저장하고 이를 사용하는 route 세그먼트를 더 구체적인 애플리케이션 코드로 분할한다.
Reference
- https://nextjs.org/docs/app/building-your-application/routing/colocation
Routing: Project Organization | Next.js
This page shares default behavior and features you can use to organize your project. Each folder represents a route segment that is mapped to a corresponding segment in a URL path. However, even though route structure is defined through folders, a route is
nextjs.org
'개인공부' 카테고리의 다른 글
| Next.js Docs (14) Internationalization (0) | 2023.07.19 |
|---|---|
| Next.js Docs (12) Middleware (0) | 2023.07.11 |
| Next.js Docs (11) Route Handlers (0) | 2023.07.08 |
| Next.js Docs (10) Intercepting Routes (0) | 2023.07.05 |
| Next.js Docs (9) Parallel Routes (0) | 2023.07.02 |
댓글