next.js 라우팅 설정 방법 및 예제보기

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

# next.js 라우팅 설정하기

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


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


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

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

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

! next.js에서 다이나믹 라우팅 사용하기

추가로 다이나믹한 라우팅(Dynamic routing) 설정 방법입니다.


만약 아래와 같은 경로가 있으며 각각 해당 페이지로 접근하고자 합니다.

이 경우 /pages/에 다음과 같이 페이지를 생성합니다.

이제 위의 페이지들 모두 [index].jsx 파일을 불러와 렌더링하여 뷰에 보여주게됩니다.