이번 장에서 배운 내용은 아래와 같습니다.

• Routing
  • 여러 페이지들 사이를 이동하는 것
  • Next.js에서는 폴더 구조를 기반으로 Route들을 구성
  • URL Segment: URL 경로의 일부이며 슬래시(/)로 구분
  • URL Path: URL에서 도메인 다음에 나오는 부분을 의미하며, segments의 조합
• Pages Router
  • Next.js 버전12까지 페이지 라우팅을 담당하던 Router
  • pages 폴더 내에 폴더와 파일을 중첩하여 경로를 구성
  • Custom App
    • App 컴포넌트 파일(/pages/_app.tsx)을 수정해서 사용
  • Custom Document
    • Document는 SPA의 단일 페이지의 역할을 하는 것
    • Document 컴포넌트 파일(/pages/_document.tsx)을 수정해서 사용
  • Routes
    • Index Routes
      • pages 폴더 내에 각 폴더에 index.js 파일을 위치시킴으로써, 사용자가 각 경로에 접속했을 때 보여줄 페이지를 지정
      • 예시: pages/index.js → /
    • Nested Routes
      • pages 폴더 내에 폴더와 파일을 중첩시키는 형태로 복잡한 라우팅 경로를 구성
      • 예시: pages/blog/first-post.js → /blog/first-post
    • Dynamic Routes
      • 대괄호를 사용하는 형태로 동적으로 변하는 경로를 구성
      • 대괄호 안에 있는 이름이 페이지로 전달될 쿼리 파라미터의 이름이 됨
      • 예시: pages/posts/[postId].js → /posts/1, /posts/2, /posts/3, ...
  • Layout Pattern
    • 공통 레이아웃
      • Layout 컴포넌트를 만들어서 각 페이지의 상위 컴포넌트로 감싸주는 방법을 사용
      • 리액트에서 HOC(Higher Order Component)라고 부르는 방식
    • Per-Page Layouts
      • 각 페이지에 getLayout 속성을 추가하여 레이아웃을 제공하는 방법
• App Router
  • Next.js 버전13에서 실험적으로 등장
  • React Server Components(서버 컴포넌트)를 기반으로 구축된 Router
  • Routes 정의하기
    • app 폴더 내에 정해진 규칙에 맞게 폴더와 파일을 중첩시키면 됨
    • 폴더 내에 들어가는 파일의 이름을 규칙에 맞게 작성해야 함
      • layout: 레이아웃
      • page: 페이지
      • loading : 로딩 화면
      • not-found: Not found 페이지
      • error: 에러 화면
      • global-error: 글로벌 에러 화면
      • route: API 엔드포인트
      • template: 재렌더링 되는 레이아웃
      • default: Parallel Routes를 위한 대체 UI
    • 아래와 같은 계층 구조로 렌더링 됨
      • layout.js
      • template.js
      • error.js: React error boundary
      • loading.js: React suspense boundary
      • not-found.js: React error boundary
      • page.js 또는 중첩된 layout.js
  • Route Groups
    • 폴더가 URL의 경로에 포함되는 것을 방지하고, app 폴더에 있는 route segments와 파일들을 논리적으로 그룹화 할 수 있게 해주는 기능
    • app 폴더 내에 (폴더 이름) 형태로 괄호로 감싼 이름의 폴더를 만들고, 그 안에 그룹화 할 폴더 또는 파일들을 넣어서 사용
    • 사용 사례
      • URL 경로에 영향을 주지 않고 경로를 구성할 때
      • 각 segment에 선택적으로 레이아웃을 적용할 때
      • 여러 개의 Root Layout을 만들고 싶을 때
  • Project Organization and File Colocation
    • 폴더를 생성했더라도 그 안에 page.js 또는 route.js 파일이 존재하지 않으면, 해당 Route는 공개적으로 접근할 수 없음
    • page.js 또는 route.js 파일이 반환하는 내용만 클라이언트에 전송됨
    • page.js 또는 route.js 파일이 아닌 다른 파일들을 App Router 내에 있는 폴더에 넣어서 안전하게 사용할 수 있음
  • Dynamic Routes
    • 동적인 데이터로부터 Route를 생성해주는 기능
    • Dynamic Segments
      • 폴더의 이름을 대괄호로 감싸서 작성 (예: [id], [slug])
    • Static Params 생성하기
      • generateStaticParams 함수를 사용하면 빌드 시점에 Dynamic Segments 기능을 사용하면서도 각 경로를 정적으로 생성할 수 있음
    • 모든 Segments 포착하기
      • 대괄호 안에 줄임표를 추가([...folderName])하여 이후의 모든 Segments를 포착할 수 있도록 확장 가능
    • 모든 Segments를 선택적으로 포착하기
      • 이중 대괄호([[...folderName]])를 사용하여 이후의 모든 Segments를 선택적으로 포착하기
      • 매개변수가 없어도 해당 경로로 Routing이 됨
  • Parallel Routes
    • 병렬적으로 여러 개의 라우트들을 렌더링 할 수 있게 해주는 기능
    • 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 렌더링 하거나 조건부로 렌더링 할 수 있음
    • @folder 형태로 슬롯을 정의하여 사용
    • 슬롯은 route segment가 아니며 URL 구조에 영향을 주지 않음
  • Intercepting Routes
    • 현재 레이아웃 내에서 애플리케이션의 다른 라우트를 로드하는 기능
    • (..) 컨벤션으로 정의할 수 있음
• Linking 및 Navigating
  • <Link> 컴포넌트
    • HTML의 <a> 태그를 확장하여 라우트 간의 prefetching과 클라이언트 사이드 내비게이션을 제공하는 내장 컴포넌트
    • next/link로부터 import해서 사용
  • useRouter() 훅
    • 클라이언트 컴포넌트에서 Router를 사용해서 routes를 변경할 수 있게 해주는 훅
    • next/navigation 패키지로부터 import해서 사용
    • 특별한 경우가 아니면 <Link> 컴포넌트를 사용해서 routes를 변경하는 것이 좋음
      • 웹사이트에서 버튼이나 링크 위에 커서를 올려도 어떤 페이지로 링크가 걸려있는지 확인할 수 없기 때문
  • redirect() 함수
    • 서버 컴포넌트에서 특정 조건에 따라 Redirection을 시키고 싶을 경우 사용