라우팅

[MinJeung-Kim]

🎰정적 라우팅

• app 폴더안의 page.tsx를 생성하면 자동으로 라우팅 됨.
• folder & file base 라우팅.
• 부모 라우팅 내에서 재사용 가능한 컴포넌트를 지정.
• 복잡한 처리를 해당 라우터 안에서 처리해주기 위해서 폴더가 생김.
• 해당 경로별 기본적으로 보여줘야하는 로딩바, 에러상태, 재사용 가능한 레이아웃 골격 등을 지정하고 만들어줄 수 있음.
• 빌드 결과 확인
  • HTML을 정적으로 미리 생성.

🌐동적 라우팅

• 페이지의 UI골격은 그대로 가져가되, 경로의 키워드 별 해당하는 제품을 보여줌.

1. 동적 라우팅 설정 방법

• [키워드] : 원하는 키워드 입력. (보통 slug로 작성)

  

• slug키워드에 실제로 어떤 경로가 왔는지 Next.js가 자동으로 props에 전달.

  type Props = {
     params:{
         slug:string;
     }
  }
  
  export default function PantsPage({params}:Props) {
  
    return <h1>{params.slug} 제품 설명 페이지</h1>;
  }

  

• 빌드 결과 확인

  $ yarn build
       or
  $ npm run build

  • 정적인 HTML은 미리 생성하고 동적인 slug는 서버에서 받아옴.(#6 )

2. 미리 HTML를 생성하는 방법

• generateStaticParams() : NextJS에서 정한 규격사항.
• 동적 라우트를 사용하는 페이지에서 명시.

type Props = {
    params:{
        slug:string;
    }
}

export default function PantsPage({params}:Props) {

    return <h1>{params.slug} 제품 설명 페이지</h1>;
}

export function generateStaticParams() {
   // products변수에 정의한 `pants`와 `skirt`에 한해서 HTML를 미리 생성
    const products = ['pants','skirt'];
    return products.map(product => ({
        slug: product,
    }))
}