[Next.js] 카버차트 : 다이나믹 라우트

다음 링크에 Next.js에서 다이나믹 라우트를 처리하는 방법이 자세하게 설명되어 있다.

Routing: Dynamic Routes | Next.js

예를 들어, 블로그 사이트는 pages/blog/[slug]와 같은 라우트 페이지를 포함할 수 있다. 여기에서 [slug]는 블로그 포스트에 대한 다이나믹 세그먼트(데이터가 표시할 수 있는 형식으로 변환된 형태)이다. [slug]는 원하는 이름으로 얼마든지 변경 가능하다. 이 프로젝트에서는 음악 장르 페이지에 해당하므로 이름을 [genre]로 설정했다.

다이나믹 세그먼트에 해당하는 컴포넌트에서는 다음과 같은 방식으로 경로의 이름을 가져와 이용할 수 있다.

// music/lib/data.ts

export interface PageProps {
  params: {
    genre: string;
  };
}

// music/[genre]/page.tsx

export default function Page({ params }: PageProps) {
  const router = useRouter();
  const pathName = params.genre;
  // ...
  
  return (
  // ...
  );
}

카테고리 버튼을 클릭하면 그에 따른 경로로 페이지가 이동된다. 이때 클릭한 카테고리와 현재 페이지 경로의 이름을 비교해 일치하는 경우 활성화 상태를 표시하기 위해 버튼에 activeStyle을 주고, Content 컴포넌트에 경로 데이터를 props로 전달해 카테고리에 맞는 콘텐츠를 보여준다.

// music/[genre]/page.tsx

export default function Page({ params }: PageProps) {
  const router = useRouter();
  const pathName = params.genre;
  // ... 
  
  return (
    <div className={styles["container"]}>
      <div className={styles["category-container"]}>
        <div
          className={styles["mobile-title"]}
          onClick={() => {
            router.push("/music");
          }}
        >
          // ...
          {showCategory ? (
            <div className={styles["hamburger-category"]}>
              {Object.keys(contents).map((category, index) => {
                if (index > 0)
                  return (
                    <div
                      // ...
                      onClick={() => {
                        router.push(`/music/${category}`);
                      }}
                      style={pathName === category ? activeStyle : {}}
                    >
                      {contents[category]}
                    </div>
                  );
              })}
            </div>
          ) : null}
        </div>
        <div className={styles["desktop-category"]}>
          {Object.keys(contents).map(category => {
            return (
              <div
                key={category}
                className={styles["category"]}
                onClick={() => {
                  router.push(`/music/${category}`);
                }}
                style={pathName === category ? activeStyle : {}}
              >
                {contents[category]}
              </div>
            );
          })}
        </div>
      </div>
      <div className={styles["content-container"]}>
        <Content pathName={pathName} fullPathName={fullPathName} />
      </div>
    </div>
  );
}