Next.js

Next.js

Next.js

• 프레임워크다. 주도권은 Next.js가 가지고 있다. 자유도가 React에 비해 낮다.

React 렌더링

• React 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. (초기 접속 이후에 빠르다 치명적인 단점)
• 처음 컨텍츠가 나타나는데 걸리는 시간 (FCP) 웹 브라우저의 성능을 지향한다.
• 3초 이상 : 이탈률 32% 증가,
• 5초 이상: 이탈률 90% 증가,
• 6초 이상: 이탈률 106%증가,
• 10초 이상: 이탈률 123% 증가 ⇒ 리액트에 치명적인 단점 ⇒ 리액트에 이러한 단점을 상쇄한게 Next.js 사전 렌더링 인다.
• 리액트 렌더링 할 떄 JS 번들을 할 떄에 모든 코드(모든 페이지에 컴포넌트)가 들어 있다.
  

  

Next.js 사전 렌더링

• 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
• 기존에 FCP단점 해결, 리액트에 장점인 빠른 페이지 이동 장점을 승계했다.
• js 실행(렌더링)은 자바스크립트 코드를 HTML로 변환하는 과정이다.
  

  

Next.js Page Router

• 현재 많은 기업에서 사용되고 있는 안정적인 라우터이다.
• React Router처럼 페이지 기능을 제공한다.
• Pages(폴더)에 js파일을 저장을 한다면 자동으로 제공 한다. /(파일명)으로 접근 한다.
• 동적 경로도 제공을 한다. 쇼핑물, 블로그 처럼, [id] 명령어 이다.
• Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다.

Next.js 설치하는 방법

• npx create-next-app@14 section02 section02는 폴더명이다. @뒤에 숫자는 버전을 선택하여 설치가 가능하다. Page Router는 14버전이 제일 안정적이기 떄문에 14버전을 설치한다. 최신 버전은 15이다. 학습을 위해 14버전 설치
• npm run dev 개발모드로 접속한다. localhost:3000으로 접속이 된다.
  

  

Next.js 파일과 폴더

• _app.tsx는 리액트에 App.js처럼 최상위 부모 컴포넌트 역할이다.
• 공통적인 레이아웃, 컴포넌트를 여기에 연결한다.
• __doucument.tsx 파일은 리액트에 index.html와 같다. 모든 페이지에 다 적용이 되어야 하는 meta-tag, 등등을 사용할 떄 사용하면 된다.
• next.config.mjs 에 reactStricMode: false로 해주기 true라면 리액트에 잠재적인 문제를 검사하기 위해서 두 번을 실행하기 떄문에 실습을 위해서 꺼주자.