1. Page Router를 소개합니다.
React-Router와 같이 페이지 기반의 Router 기능을 제공하는 방식.
om/images/skyoffly/post/1da4be46-8897-4fb9-941e-071d015264b8/image.png)
create-next-app 기준으로 page 폴더 아래에 컴포넌트 파일이 있다면, 파일 이름이 URL 라우팅의 기준으로 정해진다. 폴더를 통해서 라우팅을 세분화 하는 것 역시 가능.
2. 페이지 라우팅
useRouter
-> Next.js에서 제공하는 React 훅(hook)으로, 현재의 라우팅 정보를 가져올 수 있다. 이를 통해 URL의 파라미터나 경로를 참조할 수 있음.
동적 라우팅(Dynamic Routing)
-> Next.js에서 파일명이 [id].tsx인 것은 동적 경로 파일을 의미. [id]는 Next.js의 동적 라우팅 규칙에 따라, URL의 /movie/ 뒤에 오는 값이 id로 처리된다는 것을 의미. 이 값은 숫자일 수도 있고 문자열일 수도 있음. 예를 들어, /movie/456에 접속하면 id는 456으로, /movie/inception에 접속하면 id는 inception으로 인식.
catch-all routes (모든 경로를 포착하는 라우팅)
-> [id].tsx: 동적 라우팅으로, /movie/123 같은 경로에서 id에 123이 할당.
-> [...id].tsx: 이 경우, /movie/ 뒤에 오는 모든 경로 세그먼트를 배열로 받아들임.
/movie/123/ → id는 ["123"]
/movie/123/review → id는 ["123", "review"]
/movie/123/review/comments → id는 ["123", "review", "comments"]
optional catch-all routes (선택적 모든 경로 포착)
-> catch-all route의 변형으로, 경로가 주어지지 않았을 때도 이 파일이 실행될 수 있도록 하는 선택적 동작을 제공.
-> [...id].tsx: 필수 catch-all route로, URL 경로에서 해당 위치에 값이 반드시 존재해야 합니다. 예를 들어 /movie/ 경로에 값이 없으면 404 오류가 발생할 수 있음.
-> [[...id]].tsx: 선택적 catch-all route로, 값이 없어도 정상적으로 동작합니다. 경로가 없을 경우 id는 undefined가 됩니다. 즉, 경로가 있을 때는 배열로 세그먼트를 받지만, 경로가 없을 때도 이 컴포넌트가 실행.
커스텀 404 페이지
-> Next.js는 기본적으로 404 페이지를 제공하지만, 404.tsx 파일을 프로젝트의 pages 디렉토리에 추가하면 404 에러가 발생했을 때 이 파일에 정의된 내용을 사용자에게 보여줄 수 있음.
3. Day 02 미션.
한입 씨네마 프로젝트 생성 및 라우팅 설정하기
1. 새로운 Next App 생성하기 (Page Router 버전)
2. 라우팅 설정하기
/ : 인덱스 페이지 ("ONEBITE CINEMA" 라는 텍스트를 렌더링)
/search : 검색 페이지 ("검색 결과 : {q}"를 렌더링)
/movie/[id] : 영화 상세 페이지 ("{id} 영화 상세페이지"를 렌더링)
3. 정상 동작 인증
- 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.
