Muscardinus
getStaticProps 본문
728x90
When to use getStaticProps
|
export async function getStaticProps(context) {
return {
props: {}, // will be passed to the page component as props,
revalidate: true
}
}
context 속성
params: 해당 페이지의 route parameter를 보유하고 있다.
만약 page 이름이 [id].js이면, params는 {id: ...}라고 나타날 것이다. |
getStaticProps 반환값
1. props: page 컴포넌트에서 받는 props들을 나타낸다.
2. revalidate: 일정 시간이 지나면, page를 re-generate한다. 만약, false일 경우 re-generate가 없다.
3. notFound: 조건에 따라 404페이지가 나타나게 한다.
예시
export async function getStaticProps(context) {
const res = await fetch(`https://.../data`)
const data = await res.json()
if (!data) {
return {
notFound: true,
}
}
return {
props: { data }, // will be passed to the page component as props
}
}
주의) notFound는 getStateicPaths에서 fallback:false 일 경우, 불필요하다. |
4. redirect: 필요시, redirect할 때 사용한다. destination과 permanent를 키값을 갖는다.
예시
export async function getStaticProps(context) {
const res = await fetch(`https://...`)
const data = await res.json()
if (!data) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: { data }, // will be passed to the page component as props
}
}
728x90
'FrontEnd > NextJS' 카테고리의 다른 글
Head (0) | 2021.09.27 |
---|---|
getServerSideProps (0) | 2021.09.27 |
getStaticPaths (0) | 2021.09.27 |
Comments