[Next] 페이지 라우터(Page Router) 사용하기

 

NEXT.js의 Router

• 넥스트는 2개의 페이지 라우팅 기능을 제공한다.
• 두 가지를 동시에 이용할 수는 없고 두 라우터 중 하나만 선택해서 사용할 수 있다.

 

Page Router

• 기존 버전 모두 제공
• 기존에 제공되어 오던 기능
• 대다수의 프로젝트가 사용
• 배우기 쉬움
• 향후 App Router 학습 시 도움이 됨

 

App Roter 

• Next 13 버전부터 제공
• 새롭게 출시된 기능으로 아직 불안정한 부분이 존재함
• 미 반영 프로젝트가 아직 많음
• 입문자가 배우기 힘듦

🚨 넥스트를 처음 배우는 단계에서 들은 강의라서 몰랐는데 현재는 14버전이 나온 상태이고 page router 보다는 거의 app router를 많이 사용한다고 하네요! 페이지 라우터 부분은 기존 개념을 이해한다고 생각하고 공부하면 좋을 것 같습니다.

페이지 라우터(Page Router) 

페이지 라우터는 폴더 구조를 기반으로 라우팅을 제공한다. 

 

쉽게 설명하자면

 

"/" 경로로 들어오는 것은 자동으로 pages 폴더에서 제일 최상위에 있는 index.js 파일을 보여주고 

 

"/post" 경로로 들어오는 것은 post 폴더안에 있는 index.js 파일을 보여준다.

 

이때, 동적 경로인 URL파라미터를 받으면 그에 맞는 [id].js 파일을 보여준다. 

• 파일명에 대괄호를 하게되면 동적 경로에 대응하는 페이지의 역할을 하게된다. 
• 대괄호는 URL파라미터를 대응하기 위한 동적 라우팅이라고 생각하면 된다.

 

정의 되어있지 않은 경로로 요청이 들어온다면 404 페이지가 반환된다. 

 

이렇게 넥스트는 라우터 기능을 제공하기 때문에 리액트에서 했던 것처럼 부가적으로 react-router-dom을 따로 설치해서 설정해주지 않아도 도된다. 추가로 작성할 필요없이 폴더 구조만 만들어줘도 사용할 수 있어 편리하다.

 

기본 생성 파일 알아보기 

새로운 프로젝트를 생성하고 파일들을 살펴보면 기본적으로 생성되는 파일들이 있다. 

 

_app.js

• 리액트의 App 컴포넌트와 비슷한 역할
• 모든 페이지 컴포넌트들은 이 컴포넌트의 자식 컴포넌트로 배치되어 화면에 렌더링 됨

 

_document.js

• 리액트의 index.js와 비슷한 역할
• 모든 페이지에 공통적으로 적용되어야 하는 html 코드를 설정하는 컴포넌트
• 전체 페이지의 meta 태그를 설정한다던가 폰트, 캐릭터셋을 불러오는 것 등의 페이지 전체에 적용되는 html 태그를 적용함

 

이 두 파일은 pages 폴더 아래에 위치하지만 페이지 역할을 하는 것은 아니다. 대신 넥스트앱에 반드시 존재해야 될 필수 컴포넌트를 정의하는 파일이라고 할 수 있다. 모든 페이지, 컴포넌트에 적용되어야 하는 즉, 공통적으로 적용될 로직이나 데이터를 다루는 컴포넌트라고 생각하면 된다. 

 

다양한 경로에 대응하는 법

Page Router

• 폴더 아래 index.js 파일로 경로 대응

Dynamic Routing

• 대괄호를 이용해 동적 경로 대응

 

Catch - All

• 대괄호 안에 ...을 이용해서 중첩 경로 대응

 

Optional Catch - All

• 두개의 대괄호를 이용해 중첩 경로가 올 수도 있고 안 올 수도 있는 경로 대응

 

📌

프로젝트로 배우는 React.js & Next.js 마스터리 클래스