[Next.js] 1. Next.js?

Next.js랑 친해지기 시작!🖐️

 

 

 

1. Next.js?

vercel에서 제작한 React 라이브러리의 프레임워크이다.

 

 

2. Next.js 장점

수많은 장점이 존재하는 Next.js

하지만 그 장점들을 관통하는 핵심 장점은 라우팅과 렌더링에 있다.

 

Next.js는

라이브러리가 아닌 프레임워크이기에 직관적으로 느낄 수 있는 장점은 간편한 라우팅,

리액트의 단점인 SEO을 위해 SSR, SSG를 제공한다.

 

https://samdasoo2l.tistory.com/13

SPA? CSR? SSR?

 

 

그 외에

vercel에서 제작한 만큼 간단하게 배포가 가능하다.

SSR, SSG를 제공하는 만큼 환경변수와 보안에 장점을 가진다.

로딩 타임을 줄이기 위해 코드분할이 가능하다.

리액트와 마찬가지로 TS를 지원한다.

리액트와 마찬가지로 커뮤니티와 생태계가 활성화 되어있다.

 

 

 

3. Next.js v13 변경사항

버전 13에서 가장 중요한 변경사항은 App Router이다.

기존 페이지 라우터의 단점을 보완하는 완전히 새로운 방식을 도입한다.

(아직은 두 방식을 병행하여 사용하고 있지만 App Router가 압도적인 장점을 가진 만큼 기존 방식은 없어지게 될지도..)

 

그 외에

공통 레이아웃, 동적라우터([]), 병렬라우터(@), 라우트그룹(()), 디렉토리 구조변경,

페이지별 권한체크 기능 개선(미들웨어), 서버 컴포넌트 도입, 리액트 v18 도입과 같은 변경 사항이 있다.

 

(리액트 v18 도입과 함께 도입된 서버 컴포넌트로 인한 서버 부하는 캐시 기능으로 해결하였다.)

 

 

4. Next.js v14 변경사항

버전 14에서 가장 중요한 변경사항은 Server action이다.

 

기존에는  데이터 변경을 위해서

API라우터를 만들고 클라이언트에서 해당 라우터를 호출하여 데이터를 서버에 전달해왔다.

 

하지만 Server action을 도입함으로써

API라우터 없이도 데이터를 서버에서 수정할 수 있게 되었다.

 

 

5. Next.js v15 변경사항

버전 15에서 가장 중요한 변경사항은 3가지 정도로 볼 수 있다.

 

요청별 데이터에 의존하는 API를 비동기로 변경한다.

대표적으로 header, cookies, params, serachParams이다.

 

캐시정책이 변경되었다.

기존 fetch요청과 라우트 핸들러의 get함수에 적용되었던 기본캐싱을 없앴다.

(기본 설정시간이 30초로 되어있어 있는 등 문제가 있었다.)

 

리액트 v19과 호환된다.

 

그 외에

코드모드 제공, Turbopack 개선, after훅 추가, Form 컴포넌트 개선, Next Config 타입지원,

Hydration Error 개선, static router와 dynamic route 타입 IDE 왼쪽하단 표기와 같은 변경 사항이 있다.

 

 

 

+ 구글링 하다가 찾은 Next 기초 정리 깔끔한 포스트!

https://www.heropy.dev/p/n7JHmI

Next.js 15 핵심 정리