[Next.js] App Router의 신기능, Private Folder & Route Group (Next.js 폴더구조 잡기), File

App Router

라우트를 표현하는 폴더를 '라우트 세그먼트 (Route Segment)' 라고 하는데요,
Next.js 13버전부터 Root Route Segment의 이름이 app인 App Router가 추가되었습니다.
 
Next.js의 가장 큰 특징은 파일시스템 기반의 라우팅입니다. 
기존의 Pages Router에서 존재하던 문제점을 보완하여 출시된 것이 바로 App Router입니다. 그래서 라우팅에 새로운 기능이 여러가지 추가되었고, Next 13버전 출시 이후 많은 Next 유저들이 App Router로 갈아타고있습니다.
 


App router가 추가되며 가장 큰 달라진 점은,
 
1. 각종 폴더 유형 추가로 인해 디렉토리 라우팅이 편해졌습니다. 
2. 레이아웃 기능이 추가되었습니다. 
3. 페이지별로 권한 체크가 가능해졌습니다. 
4. 서버 컴포넌트 분리로인한 최적화 (리액트 18버전 적용)
5. 데이터 캐시
6. 서버액션 (안정화)
 
아직 버그가 많이 존재하긴하지만,
Pages Router의 구조상의 문제를 해결하기 위해 만들어진 App Router인 만큼, 새로 추가된 편리한 기능이 많습니다.
그 중 Private Folder & Route Group에 대해 간단히 정리하겠습니다.
 

Convention over Configuration

 
Next.js에서는 상황에 맞는 UI를 정의할 때 쓰는 파일명이 정해져있습니다.
(파일 이름을 약속된대로 지정해서 세그먼트 안에 정의하면 Next.js가 알아서 React 컴포넌트를 배치해주는 개념!)

Next.js File Conventions

• layout : 세그먼트의 메인 컨텐츠와 하위 세그먼트의 공용 레이아웃 UI
• page: 세그먼트의 메인컨텐츠 UI
• loading: 세그먼트의 메인 컨텐츠와 하위 세그먼트의 로딩 UI
• not-found: 세그먼트의 메인 컨텐츠와 하위 세그먼트의 Not Found UI
• error: 세그먼트의 메인 컨텐츠와 하위 세그먼트의 에러 UI
• global-error: 전역 에러 UI
• route: 서버 API 엔드포인트
• template: 특별하게 재사용될 수 있는 레이아웃 UI
• default: 패러렐라우트의 fallback UI

폴더 내에 page라는 파일명을 가진 컴포넌트가 메인 UI가 되어 해당 폴더명을 URL경로로하는 라우트를 갖게됩니다. 
기존의 Pages Router를 사용할 때는 중앙 집중식 컴포넌트 디렉토리구조로
프로젝트 규모가 커질 수록 폴더와 파일이 많아져 한 눈에 알아보기 어려웠는데요,
새로 도입된 Private folder와 Route Group기능이 이 문제를 해결해줍니다.
이 두가지 개념은 앞서 언급된 라우트 세그먼트가 아닌 폴더의 두 종류입니다. 

---

Route Group

Route group은 route가 될 수 있는 페이지들을 하나의 그룹으로 묶을 수 있게 해줍니다. 
즉, URL 경로에는 영향을 주지 않고 폴더를 묶을 수 있는 개념!
간단히 소괄호 안에 폴더명을 넣어 헷갈리지 않게 다른 폴더와 위치를 분리시킬 수 있습니다.

app
    ㄴ(beforeLogin)
    |    ㄴsignUp
    |    |	ㄴpage.tsx
    |    ㄴsignIn.tsx
    |    |	ㄴpage.tsx

 

Private Folder

Private folder는 폴더명 앞에 ‘_’ 로우데쉬를 넣어 Route를 생성하지 않도록 할 수 있는 기능입니다.
 _components 이런 식으로 폴더명을 생성하면 components라는 route는 생성되지 않습니다.
 

app
    ㄴ(beforeLogin)
    |    ㄴsignUp
    |    |	ㄴpage.tsx
    |    ㄴsignIn.tsx
    |    |	ㄴpage.tsx
    ㄴ _components
    	ㄴSignUpContainer.tsx
        ㄴSignUpButton.tsx

 
이 두가지 신기능을 이용해 URL로 생성되어야 할 route끼리 Route Group으로 묶고, 그 외에 route가 생성되지 않아야 하는 컴포넌트들은 private처리를 해 보기 편하게 폴더구조를 정리할 수 있습니다. 
 
https://github.com/ZeroCho/next-app-router-z?tab=readme-ov-file

GitHub - ZeroCho/next-app-router-z

https://nextjs.org/docs/app/api-reference/file-conventions

API Reference: File Conventions | Next.js