[NextJS] 동적 routing 작업하기

[NextJS] 동적 routing 작업하기

이번 게시글에서는 동적 routing 작업을 해보겠습니다.

동적 routing

우리가 하고자 하는 것은 /details/과일이름 url을 만들고 해당 url에 접속하면 해당 컴포넌트가 보여지는 것입니다. 여기서는 apple, banana, orange가 있다고 가정해보겠습니다. 그럼 pages/details 폴더 아래 apple. banana, orange 파일을 만들어 주어야 합니다. 아래 이미지를 참고해봅시다.

해당 컴포넌트 코드도 확인해보겠습니다. apple.js코드는 아래와 같습니다. (나머지 동일 패턴)

export default function Apple() {
  return <div>Apple 페이지</div>;
}

그렇다면 해당 url에 접속하기 위한 header menu를 만들어주겠습니다. 아래 코드를 참고하여 _app.js 코드에 Link를 추가해줍니다.

import Link from "next/link";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <ul>
        <li>
          <Link href="/">홈</Link>
        </li>
        <li>
          <Link href="/intro">소개</Link>
        </li>
        <li>
          <Link href="/details/apple">사과</Link>
        </li>
        <li>
          <Link href="/details/banana">바나나</Link>
        </li>
        <li>
          <Link href="/details/orange">오렌지</Link>
        </li>
      </ul>

      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

사과, 바나나, 오렌지를 선택하면 정상적으로 해당 컴포넌트가 표시되는 것을 확인할 수 있습니다.

◆ 문제점

위처럼 구현하게 되면 확장성이 없습니다. 만약 과일 관련 api를 호출하여 어떠한 과일을 보여줄지 모른다고 가정해봅시다. 만약 melon이 온다면 melon.js 파일을 또 만들어주어야 합니다. 그럼 몇 개가 될 지 모르는 파일을 모두 생성해야하는데 사실 불가능합니다. 그럼 어떻게 할 수 있을까요? 아래처럼 details 폴더를 수정해줍니다.

코드는 아래와 같이 수정해줍니다.

export default function Fruits() {
  return <div>Fruist 페이지</div>;
}

위와 같이 수정하게 되면 사과 바나나 오렌지 링크 중 무엇을 눌러도 해당 페이지가 표시됩니다. 즉, details/... details 아래 어떠한 url이 오더라도 해당 페이지가 보이게됩니다. 아래 결과를 확인해봅시다.

그런데 여기서도 문제가 있습니다. 해당 과일이 정상적으로 표시가 되어야 하는데 모두 Fruits로 표시되고 있습니다. 어떻게 확인할 수 있을까요? 코드를 아래처럼 수정합시다.

import { useRouter } from "next/router";

export default function Fruits() {
  const router = useRouter();
  const { name } = router.query;
  return <div>{name} 페이지</div>;
}

NextJS에서 제공하는 useRouter를 사용하면 됩니다. router.query에 우리가 정한 파일 이름으로 해당 url 데이터가 넘어옵니다. 따라서 router.query.name 값이 details/name의 name과 동일하게 됩니다. 만약 파일 명이 [aaa].js 였다고 하면 router.query.aaa 와 details/name의 name이 동일한 값이 됩니다. 그럼 name을 보여주게 되면 우리가 원하는 결과를 확인할 수 있습니다.

위와 같이 사용하면 어떠한 과일이 오더라도 details/name url로 이동하게 만들어 name을 과일 이름으로 사용하면 됩니다.

 

이번 게시글은 설명이 부족했던 것 같습니다. 중요한 요점은 어떠한 url이 오더라도 내가 원하는 페이지를 보여줄 수 있는 방법을 알아가면 됩니다.

 

참고자료

• 해당 게시글 코드 확인
• NextJS 동적 routes

 

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.