Next.js란

Next.js is the React Framework for Production

Next.js의 공식문서에 들어가면 위와 같은 글이 쓰여 있다. 즉, 제작을 위한 리액트 프레임워크임을 알 수 있다. 또한, 리액트를 위한 풀스택 프레임워크라고도 한다.

장점

1. 서버 사이드 렌더링(SSR)

• 클라이언트 대신 서버에서 페이지 렌더링
• 리액트는 클라이언트 사이드 렌더링(CSR)을 하여 서버에 영향을 안 미치고 모든 렌더링을 클라이언트에서 처리한다.

<div class='root'></div>

--> 검색엔진 최적화(SEO)에 불리함. 이는 마이페이지, 관리페이지 등에서는 상관없지만, 많은 컨텐츠를 담고 있는 공공의 페이지를 서비스 중이라면 굉장히 중요한 문제이다. 검색엔진이 웹 크롤링이 동작할때 초기에 비어있는 HTML페이지를 보기 때문이다.

• 페이지가 서버에서 미리 렌더링되기 때문에 fetch도 서버에서 이루어지고 검색엔진의 웹 크롤링이 동작할때 정보가 담긴 HTML페이지를 보여줄 수 있다.
• 사용자에게 하여금 지연시간 없이 바로 렌더된 페이지를 보여줄 수 있음.

2. 파일 기반 라우팅

• 리액트같은 경우는 라우터를 통해 여러 페이지를 가상으로 구현하여 추가적인 코드 작성필요.
• Next.js는 파일 기반 라우팅으로 파일과 폴더들의 구조를 통해 페이지 정의하여 직관적으로 페이지 구조 구분 가능.

3. 풀스택 빌드

• Node.js를 통해 자체적으로 쉽게 API삽입 가능. 데이터를 DB에 저장하고 다루는 작업을 하기에 용이함.