Next Js란

Next Js란 React를 기반으로 하는 서버 사이드 렌더링 및 정적 사이트 생성 프레임워크이다.
일반적으로 React 앱은 클라이언트 측에서 렌더링되며, 초기 로딩 속도가 느릴 수 있다.
Next.js는 이를 해결하기 위해 서버 측에서 React 앱을 렌더링하고, 초기 로딩 속도를 개선하고 SEO 최적화를 위해 검색 엔진 크롤러가 페이지 콘텐츠를 쉽게 수집할 수 있도록 한다.
리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하기 때문에 Next.js를 통해서 이 문제를 해결할 수 있다.

또한 Next.js는 정적 사이트 생성 기능을 제공한다. 이를 사용하면 사전 렌더링 된 HTML, CSS 및 JavaScript 파일을 생성하여 웹 서버 또는 CDN에 호스팅 할 수 있다. 이를 통해 앱의 성능을 향상시키고 서버 비용을 절감할 수 있다.

이 외에도 Hot Module Replacement, 자동 코드 분할, 클라이언트-사이드 라우팅, TypeScript 및 CSS 모듈과 같은 기능들을 제공한다.

SSR(Server Side Rendering)

SSR은 웹 애플리케이션을 브라우저가 아닌 서버에서 HTML으로 렌더링 하는 방법이다. 일반적인 React 앱은 클라이언트 측에서 렌더링되는데 이는 초기 로딩 속도가 느릴 수 있다는 문제점을 가지고 있다. SSR을 사용하여 초기 로딩 속도를 개선할 수 있다.

설치 방법

npx create-next-app