인프런 커뮤니티 질문&답변
작성한 질문수
getStaticPaths-> getStaticProps
해결된 질문
23.04.30 12:09 작성
·
492
1
export const getStaticPaths: GetStaticPaths = async () => {
const stores = (await import('../public/stores.json')).default;
const paths = stores.map((store) => ({ params: { name: store.name } }));
return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const stores = (await import('../public/stores.json')).default;
const store = stores.find((store) => store.name === params?.name);
return { props: { store } };
};getStaticPaths에서 리턴하는 paths가
getStaticProps 매개변수 params인가요??
답변 1
0
2023. 04. 30. 13:09
안녕하세요. 질문 감사드립니다.
paths와 params는 서로 긴밀한 관련이 있지만 서로 같지는 않습니다.
1. getStaticPaths의 paths 값을 이용하여 [name].tsx 에 대해 어떤 페이지들을 pre-render 할 지 결정합니다.
즉, path의 값은 [{ params: { name: '마굿간편한식당' } }, { params: { name: '롸버트치킨 강남1호기' } }, ...] 와 같은 형태입니다. (빌드 타임에 '/마굿간편한식당', '/펠른' 과 같은 페이지를 만들 것임을 선언)
참고할 공식 문서: https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#paths
2. getStaticProps는 params 값을 이용하여 현재 페이지( /[name] )의 'name' parameter를 가져옵니다. 예를 들어 '/펠른' 페이지에서 params 값은 { name: '펠른' } 입니다.
즉 paths를 이용해 어떤 경로의 페이지를 pre-render 할 지 결정하고, params를 이용해 각각의 페이지에 맞는 param을 가져올 수 있습니다.
예제 코드의 주석을 살펴보면 더 잘 이해되실 것 같습니다ㅎㅎ(https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false)
감사합니다 :)