[Next.js] 페이지 라우팅

웹 사이트를 구성할 때 홈 화면 뿐만 아니라 주제에 따라 여러 페이지를 이동하게끔 만드는 것이 일반적인 특징이다.

이번 포스팅에서는 Next.js에서 페이지를 이동하는 라우팅 방법에 대해 설명 해보려고 한다.

 

---

*페이지, URL 만들기

 

우선 기본 웹사이트 주소는 http://localhost:3000 이다.

쇼핑몰 웹사이트를 만든다는 가정 하에 상품 목록 페이지를 따로 만들려고 한다.

localhost:3000/list 라는 주소를 입력받거나 바로 이동할 시에 페이지를 띄우게끔 설정해보자.

 

프로젝트 디렉토리

 

1. pages 폴더 밑에 내가 만들 URL 이름의 폴더를 만든다.

(localhost:3000/list를 입력했을 때 생성되는 페이지라면 list라는 폴더를 만든다.)

폴더를 만듦과 동시에 해당 이름의 URL이 생성되고, 하위 경로에 index.js 파일을 만들어 코드를 작성한 후, 주소를 입력해보면 페이지가 나온다.

 

 

http://localhost:3000/list

 

2. http://localhost:3000/list 를 주소창에 입력하면, 내가 구성한 상품 목록 페이지를 띄울 수 있다.

 

만약 로그인 페이지를 띄우고 싶다면 login이라는 폴더를 생성하고, index.js에 코드를 짠 후, localhost:3000/login 주소를 입력 하는 방법으로 페이지 이동, 즉 라우팅을 구현할 수 있다.

 

React에서는 라우팅 컴포넌트를 구성하고, 주소를 직접 지정해주었는데,

Next.js에서는 라우팅 할 이름의 폴더를 만드는 방식으로 이동이 가능하다.

 

직접 해보면 꽤나 단순하고 간단한 방법임을 알 수 있으니, 이를 활용하여 입체적이고 트렌디한 웹사이트를 만들 수 있을 것 이다.