URL에 따른 Next.js 페이지 구성하기

프로젝트에 투입되면서 첫 스프린트 회의에 참석했다.
프로젝트 세팅과 Next.js로 페이지를 구성하는 업무를 맡게 되었고, Gatsby라는 블로그 관련 솔루션을 학습한 뒤 vercel로 배포하는 업무 또한 맡게 되었다.

후자는 난이도가 꽤 있게 느껴져서 빠르게 프로젝트 세팅을 진행하고 공부해야겠다는 생각이 드는데 진도가 마음만큼 나가지 않아 좀 답답한 부분도 있다.

어쨌든, 말로만 듣던 Next.js를 사용하기에 앞서 페이지 구상을 하며 간단하게 공식문서를 통해 routing 기능을 알아보았는데 기존에 react 프로젝트를 세팅하며 react-router 라이브러리를 별도로 설치한 것과는 다르게 Next.js는 내장된 라우팅 기능을 활용하면 되었다.

자주 볼 수 있는 URL을 예시로 페이지를 어떻게 구성할 수 있는지 정리해본다.

예시

src 폴더를 root로 보았을 때, 하위에 pages라는 폴더가 있다.
이 pages에 index.tsx 파일이 root path에 해당하는 페이지이다.
즉 base url이 http://localhost:3000 이라고 가정할 때, src/pages/index.tsx 파일은 홈에 해당하는 / path의 페이지이다.

그렇다면 다른 예시.
/category라는 url의 페이지는 어디에?
두 가지 방법으로 표현할 수 있겠다.

src/pages/category.tsx
또는
src/pages/category/index.tsx

뎁스가 더 있는 예시를 들어본다.
/category/bottom은 어떻게 구현할까?
이것 역시 마찬가지로 두 가지 방법으로 표현이 가능하겠다.

src/pages/category/bottom.tsx
또는
src/pages/category/bottom/index.tsx

다이나믹 라우팅이 필요한 경우에는 어떨까?
/category/bottom/:id와 같은 경우를 의미한다.

이 때는 아래와 같은 구조로 이를 구현할 수 있다.
src/pages/category/bottom/[id].tsx
그리고 [id].tsx 파일에는 next의 라우터가 제공하는 useRouter를 이용하여 다이나믹 라우팅을 구현할 수 있다.

// [id].tsx 예시

import { useRouter } from 'next/router';

export default function BottomItemPage() {
  const router = useRouter();

  return (
    <p>category name = {router.query.id}</p>
  );
}

고민스러운 점은, 리액트의 경우 컴포넌트나 페이지가 기하급수적으로 많아질 때 폴더를 활용하여 적절히 그룹핑 해주었는데.
Next.js의 경우 디렉터리나 파일명 그 자체가 URL, 뎁스를 나타내고 있기 때문에 함부로 건들 수가 없다.

페이지의 템플릿이 유사하거나 같은 상황에서 데이터만 바뀌는 경우라면 개별 페이지들을 일일이 만들지 않아도 된다고 하는데 기획서를 좀 더 스터디해야겠다.