이번 달에 새로 시작하게된 프로젝트에 도입한 Next.js.
이미 일은 진행 중이지만 개념을 돌아보고자 퇴근 후 작성합니다!!

Next.js ?

서버사이드 렌더링이 가능한 React 프레임워크

서버사이드 렌더링은 무엇일까?
쉽게 말해서 서버에서 html을 내려주는 것이다.
클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리는 반면, 서버사이드 렌더링은 서버에서 페이지를 그리고 브라우저에 내려준다.
서버에서 사전 렌더링 된 html을 내려주기 때문에 검색엔진 최적화(SEO)에 좋다는 장점이 있다.
자바스크립트를 차단하고 페이지를 보면 html이 잘 로드된 것을 알 수 있다.
자바스크립트를 실행하면 이 html을 꾸며주고 Link 컴포넌트 등이 작동을 시작한다.

Next.js의 기능들

• 직관적 인 페이지 기반 라우팅 시스템 ( 동적 라우팅 지원 )

• 사전 렌더링 , 정적 생성 (SSG) 및 서버 측 렌더링 (SSR) 모두 페이지별로 지원된다.

  ⇒ 기본적으로 Next.js는 모든 페이지를 사전 렌더링 한다.
  

사전 렌더링에는 두 가지가 있는데, 차이점은 '언제' html을 만드는지이다.
- 정적 생성(권장): html은 빌드시 생성되며 각 요청에 재사용된다.
- 서버 사이드 렌더링: 각 요청에 대해 HTML이 생성된다.

각 페이지에 사용할 렌더링 양식을 선택할 수 있어 하이브리드 앱을 만들 수 있다.
또는 클라이언트 사이드 렌더링도 사용할 수 있다.

• 더 빠른 페이지 로드를 위한 자동 코드 분할
• 최적화 된 프리 페치를 사용한 클라이언트 측 라우팅
• 내장 CSS 및 Sass 지원 및 모든 CSS-in-JS 라이브러리 지원
• Fast Refresh를 지원하는 개발 환경
• 서버리스 함수로 API 엔드 포인트를 빌드하기위한 API 경로
• 완전히 확장 가능

Setup

기본 Setup

npx create-next-app sampleNext

타입스크립트 Setup

npx create-next-app --typescript sampleNext

이어서 쭉 쭉 공식 문서를 보며 공부한 내용을 기록할 예정입니다!!

Next.js 공식 문서