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이 렌더될 것이다.