MouseNext

pages > book 폴더 하위를 기준으로 한다.id.tsx를 할 경우 book/id 가 나올 경우 그에 맞는 id에 하나에 대응 하는 페이지를 보여준다....id.tsx를 할 경우 book/id/name/day 등 모든 데이터를 /를 기준으로 잘라 배열로 가져올 수

React - 화면이 mount 된 후 useEffect로 api 통신을 진행하기 때문에 통신이 느리다.Next.js - 사전렌더링을 통해 접속 요청이 온 후 api 통신이 완료된 화면을 받기 때문에 속도가 빠르다'하지만 api통신의 데이터가 많을 경우 초기 로딩 속도

SSG

build 타임에 생성한 정적인 페이지를 SSG처럼 계속해서 보내주다 일정시간 뒤에 추가된 페이지를 생성한 후 이후 정적인 페이지를 반환 이것을 반복.SSG로 매우 빠른 속도로 응답이 가능하며 SSR처럼 최신 데이터 반영이 가능하다.

검색엔진최적화Next에서는 page별로 메타태그를 설정할 수 있다.이런식으로 모든 페이지에 적용해준다. 상세페이지 혹은 변화가 있는 페이지는 해당 페이지의 서버에서 받아온 변수를 넣어주면 된다.fallback으로 설정한 페이지는 메타태그들은 어디에도 없다. 그렇기 때문

PageRouting은 페이지 별로 폴더를 만들어 라우팅을 쉽게 할 수 있다.SSR SSG ISR을 지원한다.페이지별로 레이아웃을 설정해야하고 코드가 복잡하다.데이터 페칭이 페이지 컴포넌트에 집중된다페이지별로 getServerSideProps나 getStaticProp

컴포넌트 AppRouter의 컴포넌트는 특정 폴더 내부의 page.tsx로 만들 수 있다. 쿼리스트링 localhost:3000/search?q=seach 같은 쿼리스트링은 page내의 props.searchParams를 확인해 얻을 수 있다. url 파라미터 lo

Next.js의 page.tsx로 된 파일은 기본적으로 서버컴포넌트이다. 그렇기 때문에 콘솔을 찍어봐도 클라이언트가 아닌 서버쪽에 콘솔이 찍히고, useEffect와 같은 react hook을 사용할 수 없다. 그럴때 최상단에"use client"라는 문자열을 입력하면

Nextjs는 데이터가 필요한데서 데이터를 불러오는것을 권장한다.root폴더에 .evn 파일을 만든다.앞에 NEXT_PUBLIC 이라는것을 붙이지 않는다면 Next.js는 .env파일에 있는 변수를 서버측에서만 사용할 수 있도록 private하게 만들어버린다. 그러므로

Next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를 저장해놓는 기능. SSG와 유사한 방식이다.AppRouting은 자동으로 static파일과 dynamic파일로 자동으로 나눈다.Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때 마다 매

스트리밍 - 큰 데이터를 여러개의 작은 데이터로 나누어 보낸다.페이지 스트리밍 - 로딩이 오래 걸리는 컴포넌트를 먼저 대체 UI를 보여준 후 로딩이 완료되면 컴포넌트를 보여준다. Dynamic 페이지에 많이 사용한다