Next.js | App Router 알아보기.

Next.js 는 프레임워크입니다. 때문에 프레임워크에서 추구하는 방향성과 제작과정을 준수해야 합니다.

우선 폴더 구조부터 파악하고 접근할 필요가 있습니다.

https://nextjs.org/docs/app/getting-started/project-structure

Getting Started: Project Structure | Next.js

---

 

공식 문서에 첫 글에선 기본적인 폴더 구조를 소개합니다.

app, pages, public, src

 

최상단 디렉토리 이하 루트 디렉터리에서 형상관리 저장소에 업로드하면 안 되는 파일들을 안내해주고 있습니다.

.gitignore 파일에 빠진 부분이 없는지 검토합니다.

 

라우팅 파일

Next.js에서는 약속된 이름의 파일들이 존재합니다.

layout	페이지 골격
page	페이지
loading	UI  로딩 중 (스켈레톤)
not-found	UI를 찾을 수 없음
error	Error UI
global-error	Global Error UI
route	API end point
template	새롭게 렌더링된 레이아웃
default	병렬 경로 대체 페이지

 

중첩 경로

폴더는 URL segment를 정의하고, 폴더를 중첩하면 segment 가 중첩된다.

모든 레벨의 레이아웃은 하위 segment를 감싼다.

경로는 page파일이 존재하면 공개 route 된다.

 

동적 경로

대괄호를 사용하여 segment를 매개변수화할 수 있습니다.

Path 경로	URL pattern
app/blog/[slug]/page.tsx	/blog/my-first-post
app/shop/[...slug]/page.tsx	/shop/clothing, /shop/clothing/shirts
app/docs/[[...slug]]/page.tsx	/docs, /docs/layouts-and-pages, /docs/api-reference/use-router

 

구성요소는 중첩된 경로에서 재귀적으로 렌더링 된다.

segment의 구성 요소는 상위 세그먼트의 구성 요소 내부에 중첩된다.

내가 이해하기를 layout.js에서 정의한 구성이 cascading 된다는 뜻으로 이해하고 있다.

 

폴더가 정의되더라도 page.js 또는 route.js가 배치되어 있지 않으면 경로에 접근할 수 없다.

비공개 폴더는 이름 앞에 밑줄(_) 언더바를 붙여서 만들 수 있다. _folderName

비공개 폴더를 지정하면 해당 폴더와 모든 하위 폴더가 라우팅에서 제외된다.

 

route 그룹은 폴더를 괄호로 묶어서 만들  수 있습니다. (folderName)

그룹을 지정하는 이유는  marketing 관련 페이지, shop 관련 페이지, 인증 관련 페이지 등 경로의 시작지점과 구분하기 용이한 환경을 제공합니다.

또 다른 이유는

(shop) 그룹의 레이아웃을 정의해 하위 파일들과 공유할 수 있다는 것입니다.

 

특정 경로에 로딩 스켈레톤을 적용하기 위한 폴더구조입니다.

 

만약 여러 개의 루트 레이아웃을 구성하려면 최상위 layout.js 파일을 삭제하고 각 라우트 그룹 안에 layout.js파일을 추가해서 각 그룹마다의 자체적인 루트 레이아웃을 구성하게 할 수 있습니다.