Development/React.js
next - getStaticPaths
moretz0921
2022. 4. 14. 23:27
getStaticPaths : 데이터에 기반하여 pre-render때 특정한 동적 라우팅 구현
- Static Generation
- 동적 라우팅이 필요하다면 getStaticPaths로 경로 리스트를 정의해야한다.
설정
export async function getStaticPaths() {
return {
paths: [
{ params: { ... } }
],
fallback: true or false
};
}
속성
1) path
paths는 동적 라우팅 경로를 pre-render한다. (ex. pages/posts/[id].js)
params는 페이지 이름에 사용되는 매개변수와 일치해야 한다.
만약 페이지 이름이 pages/posts/[postId]/[commentId]라면, params는 postId와 commentId를 포함해야 한다.
만약 페이지 이름이 pages/[…slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이어야 한다.
2) fallback
false라면 getStaticPaths로 리턴되지 않은 것은 모두 404 페이지가 뜰 것이다.
true라면 getStaticPaths로 리턴되는 것은 build 시간에 HTML이 렌더될 것이다.