NEXT.JS란
next.js는 react의 기반으로한 프레임워크
NEXT.JS를 사용하는 이유
next.js는 리엑트에서 제공하지 않는 여러 기능들을 지원하며 비단 컴포넌트와 설정, 개발, 옵션등 다양한 부분에서 유용한 기능들을 제공한다. 쉬운 서버 로직 개발이 가능하고 배포를 쉽게 할수있다. 따라서 확장성이 뛰어나기 때문에 많은 개발자들이 이 프레임워크를 사용한다고 한다.
NEXT.JS의 장점
- 성능
- 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSR) 기능을 제공하여 초기 로드 시간을 단축할수 있다.
- 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능을 향상시킨다.
- SEO (Search Engine Optimization)
- 서버 사이드 렌더링을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링 되므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱을 할수 있다.
정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하여 SEO 성능을 극대화한다.
- 개발자 경험 (Developer Experience):
- 자동 코드 분할 (Automatic Code Splitting), 핫 리로딩 (Hot Reloading), 타입스크립트 지원 등 개발자가 생산성을 높일 수 있는 다양한 기능을 지원한다.
- API 라우트 기능으로 백엔드와의 통합을 쉽게 하고, 환경 설정이 적은(configuration-less) 개발 환경을 제공한다.
- 확장성 (Scalability)
- 서버리스 함수와 데이터 페칭 기능을 활용해 유연한 확장성을 제공한다.
- 유연성 (Flexibility)
- React와 완전히 호환되며, 원하는 다양한 툴 및 라이브러리와 함께 사용할 수 있다.
ROUTER의 종류와 설정 방식
기존에 있던 12버전까지는 pages router 방식을 지원해 이 한가지의 방식이 있었는데 13버전에서 새로 도입된 app router 방식이 도입되어
pages router, app router 2가지의 router방식을 사용할수 있다.
아래는 차이점이다.
| 특성 | Pages Router | App Router |
|---|---|---|
| 디렉토리 구조 | pages/ 디렉토리 사용 | app/ 디렉토리 사용 |
| 라우팅 방식 | 파일 기반 라우팅 (pages/about.js -> /about) | 폴더 기반 라우팅 (app/about/page.js -> /about) |
| 동적 라우팅 | [param] 문법 (pages/posts/[id].js) | [param] 폴더 (app/posts/[id]/page.js) |
| 레이아웃 관리 | 전역적으로 설정하거나 각 페이지마다 설정 | layout.js 파일을 통해 폴더 별로 설정 |
| 데이터 페칭 | getStaticProps, getServerSideProps, getStaticPaths | React 18의 새로운 데이터 페칭 메서드 사용 가능 |
| 서버 컴포넌트 지원 | 기본적으로 클라이언트 중심 | 서버 컴포넌트와 클라이언트 컴포넌트 명시적 구분 가능 |
| 사용 용이성 | 간단하고 직관적임 | 유연하지만 초기 설정이 복잡할 수 있음 |
| 프로젝트 적용 | 기존 프로젝트에 적합 | 신규 프로젝트 및 최신 기능에 적합 |
(2024.09.26 TIL)
