넥스트

이미지 최적화 방식에는 세가지가 있다.lazy loading사이즈 최적화layout shift방지(이미지 로딩이느리면 레이아웃이 밀리는 현상 방지)리액트 넥스트에서 import Image from 'next/image'; 를 사용하면 이 세가지를 자동으로 해줌다만 이

page.js, layout.js에 만드는 컴포넌트들은 전부 server component이다.장점: 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠르다.단점: html안에 자바스크립트를 못 넣는다. Ex)useState, useEffect, onClick 사용 불

client compoent안에서만 쓸 수 있다. 다음 경로로 이동가능뒤로가기앞으로가기새로고침페이지를 처음부터 다시 로드하는게 아니라, 이전과 바뀐점을 분석해서 바뀐부분만 새로고침해준다.Next.js 공식문서 명칭으로는 soft refresh 라고함해당 경로의 내용을

Next.js에서 검색노출이 중요한 페이지를 만들때, 클라이언트 컴포넌트에서 서버데이터를 가져오는거는 피하는게 좋다.클라이언트 컴포넌트에서 서버데이터 가져올때 다음과 같은데,이렇게 작성할 시, 페이지가 로드되면 유저는 텅 빈 html을 먼저 보게 된다.후에, html내

Next.js 옛날 버전에서는 SSG,ISR 이라 불렸다.Next.js에서 페이지를 하나 만들면 기본적으로 스태틱 랜더링식으로 페이지를 보여준다.페이지안에 fetch나, 이런 비슷한 함수가 없는 일반페이지들은 기본적으로 스태틱 랜더링으로 동작하게 되어있다.페이지 안에