getStaticPaths- getStaticProps

Question

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인가요??

박용주 · Answer

안녕하세요. 질문 감사드립니다. 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 ) 감사합니다 :)

getStaticPaths-> getStaticProps