next.js 프레임워크에서 라우팅(routing)을 사용하는 방법입니다. 어떻게 라우팅을 설정하는지 아래에서 알아봅니다.


# next.js 라우팅 설정하기
서버 사이드 렌더링 방식의 next.js는 매우 간단하고 쉽게 페이지 라우팅 설정이 가능합니다. 우선 라우팅 설정을 위해 앱의 상위 폴더에 /pages/ 폴더를 생성해야 합니다.

하나. /pages/ 폴더 생성하기
next.js에서 라우팅 설정하기 위해 /pages/ 폴더를 만들어야합니다. /pages/폴더에 추가된 파일들은 각각 하나의 페이지로 매핑되게 됩니다. 예를들어 만약 아래와 같은 세 페이지가 있다고 생각해봅니다.
webisfree.com
webisfree.com/about/
webisfree.com/contact/


둘. /pages/ 폴더에 파일 만들어 추가하기
이제 위 페이지로 연결하기 위해서 아래와 같이 파일을 만들어 추가합니다.
/pages/index.js
/pages/about.js
/pages/contact.js

이제 세 페이지가 모두 만들어졌습니다.

위의 방법으로 간단한 라우팅(routing) 설정이 완료되었습니다. 이처럼 next.js는 간단한 라우팅 설정이 큰 장점 중 하나입니다.


! next.js에서 다이나믹 라우팅 사용하기
추가로 다이나믹한 라우팅(Dynamic routing) 설정 방법은 추후에 알아보도록 하겠습니다.