[컴] next.js 의 getStaticPaths

 넥스트js / nextjs /넥스트

next.js 의 getStaticPaths

getStaticPaths은 production 에서 build 될 때 실행된다. runtime 에 호출되진 않는다.

getStaticPaths 사용(참고):

• getStaticPaths는 getStaticProps와 함께 사용해야만 한다.
• getStaticPaths는 getServerSideProps와 함께 사용할 수 없다.
• Dynamic Routes 에서 getStaticPaths를 export 할 수 있다. Dynamic Route도 또한 getStaticProps 을 사용한다.
  • Dynamic Routes 은 pages/post/[pid].js 같은 것들이라고 보면 될 듯([참고]](https://nextjs.org/docs/routing/dynamic-routes))
• page file 아닌 파일(예를 들면, 컴포넌트 폴더)에서 getStaticPaths를 export 할 수 없다.
• getStaticPaths를 page component 의 property 로 export 할 수 없다. standalone함수로 export 해야만 한다.

next dev에서는 매 request 마다 getStaticPaths 가 호출된다.

paths 변수

참고: paths | getStaticPaths | Next.js

• page 이름이 pages/posts/[postId]/[commentId]인 경우 params에는 postId와 commentId가 있어야 한다.
• page 이름이 pages/[...slug]와 같은 catch-all routes를 사용하는 경우 parameter에는 array type 의 slug가 포함되어야 한다. 이 배열이 ['hello', 'world']인 경우 Next.js는 /hello/world에 page를 정적으로 생성합니다.
• page가 선택적인 catch-all routes를 사용하는 경우 null, [], undefined 또는 false를 사용하여 root-most path를 렌더링합니다. 예를 들어, pages/[[...slug]]에 slug: false를 제공하면 Next.js는 / 페이지를 정적으로 생성합니다.
• pages/product/[slug].tsx 인 경우, paths: [ 'product/notebook', 'product/electro'] 등으로 설정하면 /product/notebook, /product/electro 페이지가 생성된다.

...
import { useRouter } from 'next/router'
import { Layout } from '@components/common'

export async function getStaticProps({
  params,
  locale,
  locales,
  preview,
}: GetStaticPropsContext<{ slug: string }>) {
  ...

  return {
    props: {
      pages,
      product,
      relatedProducts,
      categories,
    },
    revalidate: 200,
  }
}
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  ...

  console.log('namhnamhnamhnamhnamh')
  console.log(products)
  return {
    paths: ['/products/notebook', '/products/tails'],
    fallback: 'blocking',
  }
}

next.js 의 getStaticProps 실행

• next build 할 때 실행된다.
• fallback: true 를 사용하면, background 로 실행된다.
• fallback: blocking 을 사용하면, initial render 이전에 실행된다.
• revalidate 를 사용할때 background 로 실행된다.
• revalidate() 를 사용할 때 getStaticProps가 background 에서 실행된다.(on-demand)

getStaticProps의 getStaticPaths와 관련한 동작(참고)

• build 될때 return 되는 모든경로(any paths) 에 대한 next build 를 하는 동안 getStaticProps는 실행된다.
• fallback: true 를 사용할 때 getStaticProps는 background 로 실행된다.
• fallback: blocking 을 사용할 때, initial render 이전에 호출된다.

Reference

1. Data Fetching: getStaticPaths | Basic Features | Next.js
2. Data Fetching: getStaticPaths | Next.js