Next.js 이란?
Next.js Vercel 라는 회사가 만든 오픈 소스 프레임워크 입니다.
React는 기본적으로 자바스크립트 라이브러리 입니다.
Next.js는 React를 이용한 풀스택 프레임워크입니다.
Vercel 이라는 회사가 조금 더 쉽게 React 프로젝트를 쉽게 관리하고 배포하기 편하게 만든 프레임워크 입니다.
Next.js 장점
1. 서버 사이드 렌더링 (SSR)
React.js는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다.
그래서 페이지를 처음 조회하면 아래와 같이 div 하나만 렌더링이 되고,
그 이후에 브라우저에서 React JavaScript 코드를 실행화면 화면을 렌더링을 하게 됩니다.
<div id="app"></div>물론, React에서도 서버사이드 렌더링을 할 수 있는 기능이 내장되어있습니다.
하지만 Next.js 를 이용하면 기본적으로 서버사이드렌더링을 사용할 수 있고, 더 쉽게 사용할 수 있습니다.
서버 사이드 렌더링을 사용하게 되면, 검색에 더욱 최적화를 할 수 있습니다.
2. 라우팅 간소화
React.js 에서 페이지 이동을 하기 위해서는 라우터 라이브러리 설치해야하고, 해당 코드를 작성해야 합니다.
React.js 라우팅 예시
<Route exact path="/" component={Home} />
<Route path="/page" component={Page} />하지만, Next.js 에서는 파일의 경로를 설정해주는 것만으로 라우팅을 할 수 있습니다.
동적 파라미터, 라우팅 등 다양한 기능을 사용할 수 있도록 지원하고 있어서 간단하게 구현할 수 있습니다.
3. 풀스택 앱 빌드
풀스택 프로젝트를 만들기 위해서는 서버사이드 렌더링 코드, 백엔드 코드, Rest API 코드 등이 있어야 하는데
Next.js를 이용하면 쉽게 작성할 수 있습니다.
따로 REST API 를 만들기 위한 프로젝트 없이 하나의 프로젝트로 사용할 수 있습니다.