NEXT 공부/1. Routing

Dynamic Routes

beingB 2024. 9. 28. 13:39
반응형

정확한 세그먼트 이름을 미리 알지 못하고 동적인 데이터로부터 라우트를 만들고 싶을 때 동적 세그먼트를 사용할 수 있습니다.

 

동적 세그먼트의 경우 [folderName] 컨벤션을 가집니다.

동적 세그먼트의 경우 params props 를 layout, page, route, generateMetadata 에 넘깁니다.

 

 

Generating Static Params

generateStaticParams 함수는 동적 경로 세그먼트와 함께 사용하여 요청 시점에 필요에 따라 생성하는 대신 빌드 시점에 정적으로 경로를 생성할 수 있습니다.

generateStaticParams 함수의 주요 이점은 데이터를 스마트하게 검색한다는 것입니다.

fetch 요청을 사용해 generateStaticParams 함수 내에서 콘텐츠를 fetch 하는 경우 요청은 자동으로 메모이제이션 됩니다.

즉, 여러 generateStaticParams, Layout 및 Page 에서 동일한 인수를 사용하는 fetch 요청은 . 한번만 수행되므로 빌드 시간이 단축됩니다.

 

Catch-all Segments

동적 세그먼트는 [...folderName] . 과같이 괄호 안에. 줄임표를 추가하여 모든 세그먼트를 포함하도록 확장할 . 수있습니다.

 

Optional Catch-all Segments

Catch-all 세그먼트는 이중 대괄호를 포함하여 선택사항으로 만들 . 수있습니다. [[...folderName]]

TypeScript

반응형