Next.js Dynamic Routing

Dynamic Routing

React 만을 사용한 웹을 만들 시에 피드, 제품 상세 페이지와 같은 페이지는 디자인 형식은 일치하고 보여주는 데이터만 다른 페이였습니다. 이러한 페이지를 구성할 때에, 저희는 해당 Routing에 필요한 Data만을 전달해서 각 유저별로 다른 데이터를 보여주면 되었습니다.

Next.js에서 이러한 상품 상세 페이지, 피드 페이지가 있을 시 Static Routing으로 처리를 해야 한다면, 상품 개 수 만큼의 페이지를 미리 생성해야 합니다. 이는 불가능하다고 볼 수 있습니다. Next.js는 이러한 문제를 해결하기 위해서 Dynamic Roution(동적 라우팅) 기능을 제공하고 있습니다. 이때 변화되는 Parameter를 Next.js에서 Prop으로 전달하고 있습니다. 이를 아래와 같이 받아올 수 있습니다.

// 'app/products/[slug]/page.tsx'
import React from 'react';
 
type Props = {
  params: {
    slug: string;
  };
};
export default function Page({ params }: Props) {
  return <div>{params.slug}</div>;
}

동적 라우팅에 한해서 골격은 pre-rendering 되어 있지만, 모든 제품에 대한 페이지는 미리 만들어지지 않습니다. SSR로 형성되어 브라우저로 보여집니다.

그렇다면, 1000개의 제품 중에 사용자가 자주 보는 10개의 페이지를 미리 만들고 싶다면, 혹은 10개의 page로 충분하기에 미리 SSG로 만들고자 한다면 어떻게 해야 할까요? Next.js에서 설정한 함수 generateStaticParam을 활용합니다.

import React from 'react';
 
type Props = {
  params: {
    slug: string;
  };
};
export default function Page({ params }: Props) {
  return <div>{params.slug}</div>;
}
 
export function generateStaticParams() {
  const productions = ['pants', 'skirt'];
  return productions.map(product => ({ slug: product }));
}

이를 통해 param이 pants, skirt일 경우 static page를 서버에 미리 생성해서 hydration을 진행할 수 있습니다.

참고

• (layout)과 같이 파일 명을 app 폴더 내에서 생성된다면, Next.js는 이를 param으로 인식하지 않고 Routiong을 진행하지 않습니다.
• 모든 라우팅 param을 가지고 올 수도 있으며, optional로 가지고 올 수 있습니다. 본인의 시나리오에 맞게 사용하면 되겠습니다.

  Route	Example URL	params
  app/shop/[...slug]/page.js	/shop/a	{ slug: ['a'] }
  app/shop/[...slug]/page.js	/shop/a/b	{ slug: ['a', 'b'] }
  app/shop/[...slug]/page.js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }
  Route	Example URL	params
  ----------------------------	-----------	---------------------------
  app/shop/[[...slug]]/page.js	/shop	{}
  app/shop/[[...slug]]/page.js	/shop/a	{ slug: ['a'] }
  app/shop/[[...slug]]/page.js	/shop/a/b	{ slug: ['a', 'b'] }
  app/shop/[[...slug]]/page.js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

Reference

• Optional Catch-all Segments
• Catch-all Segments