[NNN]_getStaticPaths

• Next.js에서 정적 페이지를 생성하고자 할 때, 특히 동적으로 생성되는 페이지에 대한 경로를 다뤄야 할 때가 있습니다. 이때 _getStaticPaths 메서드가 그 역할을 수행합니다.
• getStaticPaths를 이용하면 미리 정의된 경로를 기반으로 Next.js가 어떤 경로의 페이지를 미리 렌더링해야 하는지 결정할 수 있습니다.

 

 

1. getStaticProps 사용

getStaticPaths 는 getStaticProps 와 함께 사용됩니다.

 

front/pages/post/[id].js

(...)
export const getStaticProps = wrapper.getStaticProps((store) => async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }

  store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  });
  store.dispatch({
    type: LOAD_POST_REQUEST,
    data: context.params.id,
  });
  store.dispatch(END);
  await store.sagaTask.toPromise();
});
(...)

• getServersideProps 에서 getStaticProps 로 바꿔보았습니다.

 

• 그럼 이런 에러가 뜨는데, 이 오류는 동적 경로를 가진 페이지 (/post/[id])에서 getStaticPaths 메서드가 필요하다는 것을 나타냅니다.

 

2. getStaticPath 작성

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }, { params: { id: '3' } }],
    fallback: false,
  };
}

 

getStaticProps 는 미리 해당 페이지들을 빌드해서 html 로 구성하지만, 다이나믹 라우팅이기 때문에 같은 html 구성일지라도 id에 따라 여러 내용으로 바뀔 수 있습니다. 그래서 미리 만들어 두어야 할 것들을 명시해주는 역할을 getStaticPath 가 수행합니다.

이 메서드는 반드시 paths 속성을 가진 객체 배열을 반환해야 합니다. 그 후, getStaticProps 메서드에서는 각 경로에 대한 데이터를 불러와 해당 경로의 정적 페이지를 생성합니다.

만약 코드에 이미 getStaticPaths가 있다면, 해당 메서드에서 반환되는 값을 확인하고 문제가 있는지 살펴보세요. 때로는 경로가 비어 있거나, 빈 배열이 반환되는 경우에도 이러한 오류가 발생할 수 있습니다. 이러한 경우에는 유효한 경로들을 반환하도록 수정해야 합니다.