Next.js - routing

Next.js 대표이미지

 

 

Next.js 라우팅

Next.js에서 라우팅은 페이지의 경로를 정의하고 해당 경로에 맞는 컴포넌트를 렌더링하는 방법을 의미한다. 라우팅에 방법은 두가지 이다.

"App Router"와 "Pages Router" 이다. 각각에 대해 설명해보자.

 

App Router

상태를 유지하고 리렌더링을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다. App Router를 이용하기 위해서는 /app 디렉토리에 파일을 생성해야 한다. 다음과 같이 원하는 파일명을 만든 뒤 그 파일에 page.tsx를 작성하면 된다.

 

원하는 폴더 안에 page에 파일 확장자는 js, jsx, tsx를 쓸 수 있다.

 

App Router 경로

 

 

main이라는 폴더에 page UI를 작성 후 직접 실행해 확인해보면 정상적으로 작동하는 것을 볼 수 있다.

App Router 성공

 

또한, 중첩 경로를 설정할 수 있다.

App Router 중첩경로

 

중첩경로 성공

 

중첩 경로를 설정 화면을 볼 수 있다.