[Next.js] App Router 방식으로 라우팅 설정하기

 

✅ App Router를 사용한다면?

 

변경되거나 추가되는 사항

- React 18 신규 기능 추가 (React Server Component, Streaming 등)

- 데이터 페칭 방식 변경

- 레이아웃 설정 방식 변경

- 페이지 라우팅 설정 방식 변경

 

 

크게 변경되지 않는 사항

- 네비게이팅 (Navigating)

- 프리페칭 (Pre-Fetching)

- 사전 렌더링 (Pre-Rendering)

 

 

 

 

 

✅ App Router는?

 

폴더 구조를 기반으로 페이지 라우팅이 자동 설정된다는 점은 Page Router와 동일하지만 

App Router에서는 page라는 이름을 갖는 파일만 페이지로 설정된다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

 

 

쿼리 스트링은 페이지가 전달받은 props에서 searchParams를 통해 가져올 수 있다.

export default function Page(props) {
  console.log(props);
  
  return <div>검색 페이지</div>;
}

 

 

 

 

 

 

✅ 동적 경로 설정하기

 

동적 경로도 마찬가지로 해당 페이지의 폴더를 만들로 폴더 내에 page.tsx라는 이름을 가진 파일을 만든다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

 

URL 파라미터의 값은 쿼리 스트링과 마찬가지로 페이지가 전달받은 props에서 가져올 수 있다.

export default function Page({ 
  params 
}: { 
  params: { id: string | string[] } 
}) {
  return <div>book/{params.id} 페이지</div>;
}

 

 

 

Catch-all Segments, Optional Catch-all Segments는 pages router를 사용할 때와 유사한 방식으로

[id]라는 폴더명을 [...id], [[...id]]로 바꿔주면 된다. (pages router에서는 파일명을 [...id].tsx, [[...id]].tsx로 변경)

 

 

 

 

 

 

 

 

 

참고자료

🔗 [이정환] 한입 크기로 잘라먹는 Next.js(15+)