nextjs SSG2 Data Fetching - getStaticProps 페이지에서 getStaticProps 함수를 내보내면 반환된 props를 사용해 빌드시 페이지를 미리 렌더링한다. export async function getStaticProps(context) { return { props: {}, // will be passed to the page component as props } } When should I use getStaticProps? 페이지를 렌더링하는데 필요한 데이터가 사용자 요청보다 앞서 빌드되어야할 때 The data comes from a headless CMS The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON file.. 2022. 12. 29. Pages Next.js는 pages 폴더 안에 있는 파일 이름을 기반으로 라우팅한다. pages 폴더 안에는 .js, .jsx, .ts, .tsx 파일이 들어갈 수 있으며, 각 파일에는 React Component가 들어간다. 만약 about.js라는 파일을 만들었다면 www.domain.com/about으로 접근할 수 있다. 동적 라우팅(Dynamic Routes) Next.js는 동적 라우팅을 지원하는데 pages/posts/[id].js처럼 대괄호를 추가해서 파일명을 작성하면 동적라우팅이 가능하다. www.domain.com/posts/1로 접근할 수 있다. 사전 렌더링(Pre-rendering) Next.js는 기본적으로 모든 페이지를 사전 렌더링한다. 사전 렌더링이란, 클라이언트(브라우저)측에서 자바스크.. 2022. 12. 23. 이전 1 다음 728x90