페이지 라우팅

NextJS는 App 라우팅 방식과 페이지 라우팅 방식을 지원한다. 그 중 페이지 라우팅 방식에 대해 알아보자.

NextJS에서는 기본적으로 폴더와 파일에 의한 라우팅 기능을 제공한다. 페이지 라우팅 방식에서 라우팅할 페이지는 pages 폴더안에 넣어야 NextJS가 자동으로 감지하여 라우팅을 만들어준다. 다음 구조는 어떠한 경로를 갖게 되는지 알아보자

/pages/index.js

index.js 는 특별한 의미를 지닌다. 상위 폴더의 루트 경로( / )를 나타내며, pages 폴더가 루트 폴더이기에 index.js 에게 할당되는 경로는 my-domain.com/ 이다.

/pages/about.js

파일 이름이 index가 아닐 경우 파일 이름으로 경로가 취해진다. 따라서 about.js 가 가지는 경로는 my-domain.com/about 이다.

/pages/products/index.js

index.js 는 상위 폴더의 루트 경로를 나타내는 특별한 의미를 가진다고 했다. 따라서 products/index.js 가 가지는 경로는 my-domain.com/products/ 이다.

동적 라우팅

/pages/products/[id].js

대괄호가 들어가 있으면 동적인 경로를 의미한다. 즉, 대괄호 안의 값마다 경로가 달라진다. 따라서 경로는 pages/products/1, pages/products/2 …. 등 동적으로 할당이 된다.

대괄호를 이용하면 동적 라우팅을 사용할 수 있다고 했다. [id].js 에서는 입력된 id값을 가져올 수 있다. Next.js 에서 제공하는 useRouter 훅을 사용한다.

import {useRouter} from "next/router";

function ProjectId() {
    const router = useRouter();
    console.log(router.query)
    return <div>
        <h1>The Portfolio Project Page</h1>
        <h2>{router.query.projectId}</h2>
    </div>
}

export default ProjectId

useRouter 를 호출하여 인스턴스를 만든 뒤, query 속성을 조회해보자.

중첩 라우팅

파일 뿐만 아니라 폴더에도 대괄호를 이용하여 생성할 수 있다.

[clientProjectId.js] 의 경로는 다음과 같이 표현될 수 있다. my-domain.com/clients/someId/someProjectId

import {useRouter} from "next/router";

function ClientProjectId() {
    const router = useRouter();
    console.log(router.query)
    return <div>
        <h1>specific Client Project</h1>
    </div>
}

export default ClientProjectId

catch-all 라우터

경로가 정해진 규칙이 없이 ‘더 동적’ 일 수 있다. 어떤 경로가 올지 모르는 주소에 대하여 컴포넌트를 전부 만들 수는 없을 것이다. 이때 사용할 수 있는 것이 catch-all 라우터이다.
사용방법은 자바스크립트의 전개 연산자와 비슷하다. 파일 이름에 ... 를 추가하여 […파일이름].js 와 같이 생성하면 된다.

import {useRouter} from "next/router";

function Blog() {
    const router = useRouter();
    console.log(router.query)
    return <div>
        <h1>Blog</h1>
    </div>
}

export default Blog

http://localhost:3000/blog/2022/2/3/test 경로로 접속하면 다음과 같은 값이 출력된다.