Next.js App Router 버전에서의 라우팅 방식을 알아보자!
Page Router 버전의 페이지 라우팅
- pages 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.
App Router 버전의 페이지 라우팅
- app 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.
- 다만, app router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 된다.
동적 경로를 가지는 페이지를 만들 때는 폴더 아래에 [URL 파라미터] 아래에 page.tsx 이런식으로 만들면 된다.
1. app > 폴더 > page.tsx 파일
예를 들어, app > search 폴더 > page.tsx 파일을 만들면,
URL은 http://localhost:3000/search가 된다.
2. 쿼리 스트링 만드는 법
export default function Page(props){
console.log(props);
return <div>Search 페이지</div>
}
이런식으로 props를 콘솔로 찍고 터미널을 살펴보면, props에 출력된 값이 프로미스 객체 형태로 저장이 되는 것을 알 수 있다.
App Router 버전의 Next App에서는 페이지에게 전달되는 URL 파라미터나 쿼리스트링이 props를 통해서 전달이 되기 때문에,
SearchParams 객체로부터 실제 쿼리스트링의 값을 꺼내서 활용할 수 있다.
이 props의 타입을 정의하고 활용하는 코드는 다음과 같다.
export default async function Page({ searchParams }: { searchParams: Promise<{ q: string }> }) {
const { q } = await searchParams;
return <div>Search 페이지 : {q}</div>
}
3. URL 파라미터 만드는 법
app > book 폴더 > [id] 폴더 > page.tsx 파일을 만들면, NEXT가 이 파일을 동적 경로에 대응하는 파일이라고 인식하게 된다.
URL 파라미터 값을 페이지에 활용하기
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <div>book/[id] 페이지 : {id}입니다.</div>
}
현재에는 딱 하나의 URL 파라미터에만 대응하도록 설정이 되어있기 때문에, 여러개의 URL 파라미터를 받기 위해서는 [...id] (Catch All Segment)로 설정을 하면된다.
여기서 주의 할 점은, Catch All Segment로도 대응할 수 없는 경로가 한가지 있다.
그것은 URL 파라미터가 존재하지않는 URL이다. (여기서는 localhost:3000/book)
만약 /book 뒤에 어떤 경로가 나오든 안나오든 모두 다 범용적으로 대응이 되게끔 하고 싶다면, 파일의 이름을 대괄호로 한번만 더 감싸주면 된다.
이것을 "Optional Catch All Segment" 라고 부른다.
