[Next.js] Next.js 개념 및 사용하기

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(SSR)과 같은 다양하고 풍부한 기능을 제공합니다.

Next.js는 많이 말하는 것처럼 SSR을 하기 위해 사용한다고 한다. CSR과 SSR의 개념을 알아보자.

CSR과 SSR의 개념

1) 클라이언트 사이드 랜더링(CSR)

: 클라이언트인 브라우저가 랜더링을 처리하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 된다.

2) 서버 사이드 렌더링(SSR)

: 브라우저가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공한다. 서버가 화면을 그리는 주체가 된다.

SSR의 장점

1. 클라이언트 사이드 랜더링은 위에서 설명한 것처럼 모든 js 파일을 로드하고 사용자는 그 후에 웹을 보게된다. 화면이 로딩될 때까지 사용자는 기다려야 한다.
   1. 이를 SSR을 쓰게 되면 자바스크립트 파일이 로딩되는 시간이 줄어든다.
2. 클라이언트 사이드 랜더링은 js파일이 로드 되지 않은 경우 아무런 정보를 보이지 않는다. 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 검색했을 때 해당 페이지가 보이지 않게 된다.
   1. 서버 측에서 자바스크립트, html, css를 만들어 컨텐츠를 직접 업로드 함으로써 검색엔진에 걸리게 된다. 그러면 해당 페이지가 검색에서 보이게 된다. 또한 meta 태그를 자유롭게 추가함으로 seo를 용이하다.

2022년 웹 프레임워크 선호도 순위

프레임 워크 선호도 순위

Next.js의 기능

• 정적 사이트 생성
• 증분 정적 콘텐츠 생성
• 타입스크립트에 대한 기본 지원
• 자동 폴리필polyfill 적용
• 이미지 최적화
• 웹 애플리케이션의 국제화 지원
• 성능 분석

→ 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용된다.

Next.js 시작하기

node.js 와 npm만 있다면, Next.js를 시작할 수 있다. 이미 깔려있다면 아래의 코드를 쳐준다.

npx create-next-app <app-name>

그러면 옵션을 선택하고 Next.js파일이 열린다.

npm run dev

을 치면 페이지가 열린다.