nextjs

Next.js 에서는 자체적으로 Image테그를 지원하고 있다. 만약 img 테그를 사용하면 다음과 같은 warning 메세지를 보게 될 것이다.그렇다면 왜 Image 테그를 써야하고 뭐가 좋을까?Next 가 지원하는 Image 테그를 사용하면, 자동적으로 lazyLo

Local Image 이전에 말한, preLoading 을 사용하기 위해서는 local image 와 remote image 의 차이를 알아야 합니다. > next.js 폴더 안에 존재하는 이미지가 local image 이고, api 로 호출하는 이미지가 remote

특정한 페이지에서 조건에 따라서 렌더링 하는 컴포넌트가 달라지는 경우가 있습니다. 예를 들어 다음과 같은 화면일 때, phone 인 경우에만 렌더링 되는 컴포넌트가 있을 수 있습니다.default 가 email 이고, 사용자가 email만 사용하고 phone 탭을 누르

next.js 로 프로젝트를 만들면 html 파일이 없습니다.이 때, \_document 파일을 사용해서 페이지를 렌더링하는 데 사용되는 html을 변경할 수 있습니다. 이 파일은 서버에서만 랜더링 되기 때문에, onClick 과 같은 이벤트 핸들러는 사용할 수 없습니

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props페이지에서 getServerSideProps(서버 측 렌더링)라는 함수를 export 하면 Next.js는 getServerSi

getServerSideProps 을 사용해서 ssr을 사용할 수 는 있지만, 클라이언트의 PC에 저장되는 SWR을 사용할 수 없었습니다.페이지를 미리 렌더링해야 하는 경우 Next.js는 2가지 형태의 사전 렌더링을 지원합니다.Static Generation (SSG

getServerSideProps(SSR) 에 의한 페이지는 느리다 static 사이트란, 정적인 사이트입니다. database를 필요로 하지 않는 사이트가 주로 static 사이트입니다. static 한 사이트는 매우 빠르지만, 업데이트가 힘들다는 단점이 있습니다.

getStaticProps 를 사용해서 static한 페이지를 만들어 보았다. 그렇다면, 여러개의 static 페이지를 만들때는 어떻게 해야할까?static한 페이지 이기 때문에, 총 몇개의 페이지를 만들어야 하는지 알려줘야 합니다. 기존의 dynamic page 처럼

이전 글의 SSG (Static Site Generation) 의 단점은, 데이터가 빌드시에 만들어지고, 다음 빌드까지 바뀌지 않는다는 점이었습니다. 이러한 단점을 보완하기 위해서 next.js 는 <span style="backgroundColor:> (ISR,