Next.js의 Router 객체와 정적·동적 라우팅을 정리합니다.

---

Router & Routing

Router

router 객체는 페이지 이동과 관련된 기능을 가진 객체입니다.

// 사용법
import { useRouter } from "next/router" // Next.js에서는 라우터로 이동을 하기 위해서는 useRouter를 이용하여 router객체를 사용할 수 있어요

export default function example() {
    const router = useRouter(); // router 객체 사용하기 위해 변수 선언
    router.push("이동할 페이지 주소") // 입력한 주소로 페이지를 이동해요.
}

자주 사용하는 router 객체 기능

• Router.pathname : 현재 위치 주소
• Router.asPath : 현재 위치 주소
• Router.back() : 뒤로 가기
• Router.push() : 현재 페이지에서, 다른 페이지로 이동
• Router.reload(): 새로고침
• Router.replace(): 현재 페이지 삭제 후, 다른 페이지로 이동

Routing

서로 다른 페이지를 보여주기 위한 컴포넌트 배치 작업을 Routing이라고 합니다.

Static Routing 이란?

main, login처럼 누가 언제 들어가도 같은 화면을 보여주는 **정적인 페이지**의 라우팅을 **정적 라우팅**이라고 합니다.

pages 아래에 주소가 될 폴더를 만들고 화면 파일(index.js)을 넣으면 주소에 맞는 페이지가 출력됩니다.

Dynamic Routing 이란?

상세 페이지처럼 주소에 따라 다른 내용을 보여주는 **동적인 페이지**의 라우팅을 **동적 라우팅**이라고 합니다.

Next.js는 동적 라우팅을 기본으로 제공합니다. 아래 사진으로 구조를 설명합니다.

폴더 구조만 잘 잡으면 라우팅을 어렵지 않게 구성할 수 있습니다.