[Next.js] 정적 라우팅과 동적 라우팅 | Static-Routing and Dynamic-Routing

Routing / Router

라우팅이란 페이지 이동을 뜻한다. 그리고 라우터는 이러한 라우팅을 도와주는 도구이다.

 

React 기반의 프레임워크인 Next.js에는 자체 라우터가 내장되어있다. 이 라우터를 불러와서 사용하면 간편하게 라우팅을 할 수 있다. 라우터에도 다양한 기능이 있으며, 이러한 것들을 포함하고 있는 라우터 자체를 라우터 객체라고 부른다. 주로 사용되는 라우터 객체의 내장 메소드는 다음과 같다.

 

import {useRouter} from 'next/router'
// 먼저 라우터를 import 해와야 사용할 수 있다.

const router = useRouter()

router.push("이동할 페이지") // 다른 페이지로 이동한다.
router.reload() // 새로고침한다.
router.replace("이동할 페이지") // 현재 페이지를 삭제하고 다른 페이지로 이동한다.
router.pathname // 현재 위치의 주소를 불러온다.

더 자세한 내용을 확인하고 싶을 경우에는 Next.js 공식 문서를 참고하자.

https://nextjs.org/docs/api-reference/next/router

next/router | Next.js

 

정적 라우팅

고정된 페이지로 라우팅하는 것. /login 페이지가 대표적인 예시로, 누가 언제 접속하더라도 같은 페이지로 라우팅된다. 이러한 방식으로 이동하는 것을 정적 라우팅한다고 표현한다.

 

동적 라우팅

가변적인 페이지로 라우팅하는 것. 게시판 상세보기 같은 것이 대표적인 예시로, 실제 소스코드는 한 페이지지만 글 번호나 글의 id에 따라서 주소가 변경된다. 예를 들면 아래와 같다.

---

예시 폴더트리

/05-router-practice/ 로 이동하면 항상 고정된 페이지(index.js)로 연결된다. (정적 라우팅)

/05-router-practice/1 - 1번 게시글

/05-router-practice/2 - 2번 게시글

/05-router-practice/3 - 3번 게시글

/05-router-practice/4 - 4번 게시글로 연결된다. (동적 라우팅)

---

Next.js에서 동적 라우팅 시, 대괄호 안에 들어있는 문구는 변수의 기능을 한다.

라우터 객체를 이용해 이 변수의 값을 지정해줄 수 있으며, 이 변수는 문서 내에서 자유롭게 활용이 가능하다.

const router = useRouter()
console.log(router.query)