Next.js5 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. Data Fetching - getStaticPaths 페이지에 동적 경로가 있고 getStaticPaths를 사용할 경우 생성할 경로 목록을 정의해야한다. 동적 경로를 사용하는 페이지에서 getStaticPaths 함수를 내보내면 Next.js는 지정한 모든 경로를 정적으로 사전 렌더링한다. // pages/posts/[id].js // Generates `/posts/1` and `/posts/2` export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false, // can also be true or 'blocking' } } // `getStaticPaths` requires using `ge.. 2022. 12. 27. Data Fetching - getServerSideProps getServerSideProps 페이지에서 getServerSideProps를 사용하면 해당 함수에서 반환된 데이터를 이용해 페이지를 미리 렌더링한다. export async function getServerSideProps(context) { return { props: {}, } } getServerSideProps는 언제 실행될까? getServerSideProps는 브라우저에서 실행되지 않고 서버에서만 실행된다. 페이지에서 getServerSideProps를 사용하는 경우 해당 페이지를 직접 요청하면 getServerSideProps가 실행되고 반환된 데이터로 사전 렌더링된다. 브라우저에서 next/link 또는 next/router를 통해 해당 페이지로 페이지 전환을 하게되면 Next.js는 .. 2022. 12. 26. 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. Next.js 시작하기 자동 설정 1. 설치 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 타입스크립트 사용시 npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 설치시 대화형으로 설치가 진행되며, 비대화형으로 설치하기 위해 option을 추가할 수 있다. create-next-app [options] Options: -V, --version output the version number --ts, --typescript Initialize as a TypeScript proj.. 2022. 12. 23. 이전 1 다음 728x90