Terminology

• Tree: 계층 구조를 시각화 한 것
• Subtree: 전체 트리의 일부분
• Root: 트리 또는 서브트리의 제일 처음 노드
• Leaf: 더이상 자식 노드를 가지지 않는 노드

• URL Segment : 슬래시로 구분되는 url 경로
• URL Path: 도메인을 제외한 url 부분

The app Directory

• 새로 도입된 app 디렉터리는 기존 방식인 pages 디렉토리와 병용해서 사용 가능
• 앱 디렉터리는 기본적으로 리액트 서버 컴포넌트를 사용하고, 필요한 경우 클라이언트 컴포넌트를 사용할 수 있음
  
• 디렉터리에서 폴더는 라우팅 경로를 정의하는데 사용하며, 루트 폴더부터 차례로 계층 트리 구조를 형성하며 라우팅 주소를 정의하게 됨
• 폴더 내부에 파일을 넣어 해당 경로에서 렌더링할 컴포넌트를 정의할 수 있음
• 각 폴더는 url 세그먼트를 나타내며 . 폴더의 위치가 실제 URL Path의 세그먼트에 대응함
• 폴더를 여러개 중첩해 중첩된 url 경로를 만들수도 있음

File Conventions

• page.js: 페이지에 대한 고유한 ui를 만들고 url에 공개적으로 엑세스 할 수 있게 해줌
• route.js: 경로에 대한 서버측의 엔드포인트를 생성함
• layout.js: 현재 세그먼트와 자식들이 공유할 UI를 생성
• template.js: layout.js와 비슷하지만, 페이지가 바뀔 때마다 자식 컴포넌트가 다시 마운트되고, state가 초기화됨
• loading.js: 로딩 ui를 나타내며, React suspense로 감싸져 있는 부분에 로딩시 출력됨
• error.js: 에러 컴포넌트를 출력하며, error boundary로 감싸져 있는 부분에 표시됨
• global-error.js: error.js와 비슷하지만, Root element에서 사용
• not-found.js: 올바르지 않은 url이 입력됬을 때 보여줄 레이아웃을 정의
• 컴포넌트는 layout.js -> template.js -> error.js -> loading.js -> not-found.js -> page.js or 중첩된 layout.js 순으로 렌더링 됨
• 이외의 파일들 (css, js, 분리된 컴포넌트)이 사용된 경우 사용되는 폴더 내부에 해당 파일들을 같이 넣어주면 됨

Server-Centric Routing with Client-side Navigation

• 구버전에서 사용한 pages 폴더와 다르게 app 폴더를 사용하면 서버 중심 라우팅을 사용 가능함
  • route map을 다운로드할 필요가 없어지게 되며, 동일한 서버요청을 통해 route 탐색이 가능해짐
    
  • 라우팅은 서버 중심으로 진행되지만, 페이지 탐색시에는 변경된 레이아웃과 페이지만을 렌더링 하는 방법을 통해 SPA와 유사한 경험을 제공함
  • 한번 탐색한 경로의 페이먼트는 클라이언트 캐시로 보관됨

Advanced Routing Patterns

• Next.js에서는 다음과 같은 라우팅 기능을 사용할 수 있음
  • Parallel Routes: 각각이 독립적으로 navigate되는 두개 이상의 페이지를 동시에 렌더링
  • Intercepting Routes: 모달과 같이 다른 url을 가져와 화면의 일부로 보여주는 방식
  • Conditional Routes: 조건에 따라 렌더링을 달리할 수 있는 기능

출처:
https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory