Hong_DEVBOX

Data Fetching 이전 포스트에서 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-Side Renderin)을 알아보았다. 이번 포스트에서는 데이터를 가져오기 위해 Next.js에서 제공하는 세 가지 함수 및 client-side에서 어떻게 데이터를 가져오는지 알아보자. Next.js에서는 데이터를 가져오기위해 세 가지 함수가 사용된다: getStaticProps (Static Generation) : 프로젝트가 빌드될 때 데이터를 가져온다. getStaticPaths (Static Generation) : 데이터를 기반으로 동적 라우트를 지정한다. getServerSideProps (Server-Side Rendering) : 각 요청이 있을 때마다 데이터를 가져온..

NextJS 2021. 8. 27. 16:23

Pages Next.js에서 page 는 `.js`, `.jsx`, ' .ts'에서 내보내진 리액트 컴포넌트이다. 만약 `pages/about.js`와 같이 pages 디렉토리에 js 파일을 생성하게 되면 `/about` url 을 통해 접근이 가능하다. function About() { return About } export default About Pages with Dynamic Routes (동적 라우팅) Next.js는 동적 라우팅을 지원한다. 예를 들어 `pages/posts/[id].js` 와 같은 파일을 생성하게 되면 `posts/1`, `posts/2`와 같이 동적으로 접근이 가능하다. Two forms of pre-rendering Next.js는 정적 생성(Static Generati..

NextJS 2021. 8. 27. 12:23