Next.js 란

Next.js 는 웹 애플리케이션을 만들기위해 사용하는 React 의 프레임워크 입니다.

React는 라이브러리로 UI를 만들기 위해서 사용하는 라이브러리 입니다.

리액트가 다른 프레임워크와 달리 어떠한 구체적인 애플리케이션 구조나 제어 방법을 강제하지 않기 때문입니다.

즉, 리액트는 UI(User Interface)를 구성하기 위한 도구로서 필요한 기능을 제공하면서도, 개발자가 자유롭게 애플리케이션의 구조를 설계하고 구현할 수 있도록 합니다.

따라서, 리액트는 일종의 라이브러리로서, 개발자가 필요한 경우에만 호출하여 사용할 수 있습니다. 또한 다른 프레임워크나 라이브러리와 함께 사용이 가능하며, 필요한 경우 개발자가 직접 추가 기능을 구현할 수도 있습니다.

라이브러리 : 무언가를 만드는데 유용하게 사용하는 도구 같은 개념 ➡️ 특정 문제 해결을 위한 솔루션을 제공 ➡️ 필요한 것만 골라서 사용 가능
프레임워크 : 전반적인 골격 제공, 정해진 골격안에서 로직을 구현해 나가야함 ➡️ UI, Routing, 상태관리 등 많은 솔루션들이 포함되어 있다.

React 가 가지고있는 단점들을 Next.js 가 보완해줄수 있기 때문입니다.

대표적으로 리액트를 할 때 항상 따라오는 문제점이 첫 화면 로딩 지연과 SEO 라고 생각 합니다. 그 이유는 CSR 기반의 렌더링을 하기 때문입니다.

하지만 Next.js 는 SSR 를 지원하여 CSR로 발생 할 수 있는 SEO 문제점을 보완할 수 있습니다.

CSR은 클라이언트 측에서 렌더링을 하는 방식 입니다.

CSR은 한 번만 로딩되면 그 이후에는 사용자가 빠르게 애플리케이션을 사용 할 수 있고 사용자 경험 또한 좋습니다.

하지만 한 번만 로딩 이라는 말이 단점 입니다. 처음에 모든 리소스를 받아오기 때문에 페이지 로딩시간이 길어 집니다. 이에 따른 문제가 몇 가지 더 발생하는데

TTV + FCP 가 오래 걸립니다.
➡️ TTV(Time to View) : 사용자가 화면을 보는 시점.
➡️ FCP(First Contentful Paint) : 브라우저에서 처음으로 의미있는 컨텐츠가 표기될때까지 걸리는 시점
자바스크립트 활성화가 필수
➡️ HTML 에는 UI 요소가 없기 때문에 자바스크립트 코드가 필요 합니다.
➡️ 만약 사용자가 브라우저에서 자바스크립트를 비활성화 하면 애플리케이션은 동작하지 않고 첫 화면 또한 렌더링 되지 않습니다.
SEO 가 힘듭니다.
➡️ 검색엔진 크롤러들은 일반적으로 HTML 페이지 내용을 읽어와서 검색 결과에 반영합니다.
➡️ 하지만 React 애플리케이션은 JavaScript 파일이 로드되고, 컴포넌트가 렌더링되고, API 요청이 완료될 때까지 페이지의 내용이 비어있는 상태로 유지됩니다.
➡️ 그렇기에 추가적인 작업이 더 필요하게 됩니다.

위의 문제점들을 Next.js 를 사용하여 보완 할 수 있습니다.

코드 분할(Code splitting): Next.js는 페이지마다 필요한 컴포넌트만 로딩하도록 코드를 분할하여 초기 로딩 속도를 개선할 수 있습니다.
자동으로 빌드 및 번들링: Next.js는 Webpack과 Babel과 같은 빌드 도구를 자동으로 설정하여, 초기 설정이 간단합니다.
Hot Module Replacement(HMR) 지원: 코드 수정 시 페이지 새로고침 없이 바로 적용되도록 하는 HMR을 지원합니다.
정적 사이트 생성 지원: Next.js는 정적 사이트 생성(Static Site Generation, SSG)을 지원하여, 사이트의 초기 로딩 속도를 높일 수 있습니다.
TypeScript 지원: TypeScript를 공식적으로 지원합니다.
개발용 서버 제공: 개발용 서버를 제공하여, 개발 시 빠른 수정 및 테스트를 할 수 있습니다.
기타 편리한 기능: CSS 모듈, 이미지 및 폰트 처리, Head 컴포넌트를 통한 메타데이터 관리 등의 편리한 기능을 제공합니다.