[Next.js] getStaticProps

getStaticProps

기본개념

  • async 함수인 getStaticProps 함수를 export하면 Next.js는 getStaticProps에 의해 return된 props를 이용해 build 시에 pre-rendering 함
export async function getStaticProps(context) {
  return {
    props: {}, // props로 page component에 전달될 것입니다.
  }
}

사용처

  • 사용자 요청에 앞서서 build 시에 페이지를 pre-render에 이용할 수 있는 데이터가 있다면
  • headless CMS로부터 오는 데이터가 있다면
  • cached될 수 있는 데이터가 있다면(사용자 별로 말고)
  • SEO를 위해 pre-rendering 되어야만 하는 페이지라면

context

  • getStaticProps의 파라미터

  • 아래와 같은 key를 가지는 object

  • params
  • getStaticPaths함수와 함께 사용되어짐
  • dynamic route에서 사용하는 값으로 route parameter를 가짐

  • ex) [id].js라는 page라면 params에는 { id: ... }와 같은 형태를 가짐

  • preview
  • preview mode에 있다면 true이고 그렇지 않으면 undefined
  • headless CMS에서 data를 fetch할 때 유용

  • Next.js가 build time이 아닌 runtime 요청 시에 기존에 게시된 콘텐츠 대신 현재 CMS에서 draft된 콘텐츠를 render하길 원할 때 유용

  • previewData

  • preview mode 시에 preview Data set을 가지고 있음

  • locale

  • 현재 active locale을 포함

  • locales

  • 모든 supported locales를 포함

  • defaultLocale
  • 설정된 default locale을 포함

return

  • getStaticProps는 다음과 같은 object를 return

  • props
  • required(object)

  • page component가 받을 props object입니다. serializable object로 만들어야만함

  • revalidate
  • optional(number)
  • page re-generate가 일어날 수 있는 시간(초 단위)
  • 예를들어 1초로 적용해놓으면 요청이 들어올 때 1초마다 page를 re-generation함

  • 새로운 post가 생성되더라도 재 build, 재 deploy 하는 것 없이 사용될 수 있음

  • notFound
  • optional(boolean)
  • 404 page로 return 하도록 함
  • getStaticPaths에서 fallback: false 일 경우에는 필요하지 않음
    • pre-render되는 path들만 return 되기 때문
export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, 
  }
}
  • redirect
  • optinal({ desination: string, permanent: boolean})
  • 내부나 외부 resource로 redirect 하게함
export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {},
  }
}

Note

  • build 시에 redirecting은 현재 허용되지 않음
  • build 시에 redirect를 허용하기 위해 next.config.js에 다음과 같이 추가 해야 됨
module.exports = {
   async redirects() {
     return [
       {
         source: '/about',
         destination: '/',
         permanent: true,
       },
     ]
   },
 }
  • getStaticProps에서 top-level scope module을 사용 할 수 있음
  • getStaticProps에서 import된 module은 클라이언트 측에 번들로 제공되지 않음
  • getStaticProps에서 직접 서버 측 코드를 작성할 수 있음
  • 여기에는 파일 시스템이나 데이터베이스에서 읽는 것이 포함
  • top-level scope module
import { something } from "<module>"; <-- Global / Top-level scope
  • getStaticProps에서 Application내에 API route를 호출하기 위해 fetch()를 사용해서는 안됨
  • 대신 API route 내에서 사용되는 로직(control)을 직접 가져와야 함
  • 이 접근 방식을 위해 코드를 약간 리팩토링해야 할 수도 있음
  • 외부 API에서 가져 오는 것은 괜찮음

links

social