관리 메뉴

웹개발 블로그

Next.js와 React.js 무슨 차이인가? 본문

◆React.js & Next.js & Node.js/Next.js(프레임워크)

Next.js와 React.js 무슨 차이인가?

쿠키린 2025. 4. 13. 23:36

React.js를 보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공함


Next.js (리액트의 확장판)
 =
리액트js
  +
페이지 라우팅
빌트인 최적화 기능
다이나믹 HTML 스트리밍


미국의 Vercel이라는 회사에서 개발해서 
현재 오픈 소스임

세계적으로 대단한 기술

ex 인프런도 Nextjs

이런 사랑을 받는 이유는?
- Nextjs는 라이브러리가 아닌 프레임워크이기 때문이다.

Nextjs는 Reactjs 전용의 웹 개발 프레임워크

Reactjs는 UI 개발을 위한 JS "라이브러리"

=========================================

0. 프레임워크 VS 라이브러리
- 🚨기능 구현의 주도권이 누구에게 있는가?
주도권이 개발자에게 있다 : 라이브러리
주도권이 개발자에게 없다 : 프레임워크

1. 라이브러리
EX : 리액트, 제이쿼리
주도권을 개발자가 가짐
- 기능 구현을 원하는 방향으로 진행한다.
- 쓰고싶은 도구, 쓰고싶은 기술을 쓴다.

EX
리액트 라이브러리 사용 중 페이지 라우팅 기능을 구현해야한다 
방법1 : React Router
방법2 : TanStack Router v1.0 
-> 방법1,2 둘중 선택해서 사용해도 되지?
--> 전혀 문제 없어~!


2. 프레임워크
주도권을 프레임워크가 가짐
- 프레임워크가 제공하는 기능을 이용하거나 [허용하는 범위 내에서]만 추가 도구 사용 가능
EX
Nextjs(프레임워크)에서 페이지 라우팅 기능을 구현해야 함
무조건! Nextjs가 제공하는 라우터
- Page Router(Next.js)
- App Router (Next.js)

출처 : 한 입 크기로 잘라먹는 Next.js(v15)