Next.js 14 App Router 폴더구조

Safe colocation by default

/app 안에서는 비교적 자유료운 구조를 활용해도 좋다.

/app 폴더 안의 폴더 구조와 page.js 는 URL과 매핑된 routes와 그 관계를 표현한다.
page.js 대신 route.js를 쓰기도 한다

각각의 폴더는 page.js나 route.js가 있어야 Next.js에 의해 route로 인정된다!
그리고 page.js에서 return해준 컴포넌트만 client로 보내진다.

이렇게 하면 실수로 "routable"한 directory가 만들어지는걸 방지할 수 있다고 한다.

=> routable한 파일과 not routable한 파일의 구분이 중요하다.

routable: /app/asdf/page.js안에서 return 해준 애
not routable: /app 안의 폴더가 해당 폴더의 경로에 page.js를 가지지 않을 때

Project organization features

Next.js는 프로젝트 구조화에 도움이 되는 몇 가지 기능들이 있다.

Private Folders

• 폴더명 앞에 prefix 붙이기 ex) _folderName => 로직 분리 및 시각화에 유용하다.
  _private folder: 라우팅과 관련이 없다고 명시해주는 기능. private folder에서는 page.js가 있어도 라우팅에 관여하지 않는다.
  

Route Groups

• 폴더명을 괄호로 감싸기 ex) (folderName) => segment 사이의 복잡한 관계를 정리할 때 유용하다.
• 폴더로 그룹화는 하지만 URL path에 포함시키고 싶지 않을 때.
  

/src Directory

• configuation 파일들과 application 코드를 구분할 수 있다.
  

Module Path Aliases

• 복잡한 폴더 구조를 가진 프로젝트에서 import문을 간단 명료하게 작성할 수 있다.
  

Project organization strategies

1. /app 밖에서 컴포넌트를 구조화하고 app폴더 안에서는 routable한 애들만 관리하는 방법
   

2. /app 최상단의 components 폴더에서 관리하는 방법
   

3. 기능이나 라우트 기준으로 폴더로 묶어 관리하는 방법(/app/components는 동일)
   

Refs

Next.js 공식 Docs