Next.js란?

codeConnection 2024. 7. 4.

React.js와 같이 웹 애플리케이션 구축을 도와주는 도구이다. 그런데 차이가 있다면 리액트는 주도권이 개발자에게 있는 라이브러리이고, Next.js는 주도권이 프레임워크에 있는, Frame Work이다.

예를 들어 리액트에서는 라우팅을 설정할 때 별도의 라이브러리를 다운받아서 자유롭게 개발자가 세팅을 해줬지만,

Next.js는 프레임워크가 준비한 방식대로, app 폴더 내에서 폴더 방식의 라우팅을 해주어야 한다.

웬만한 부분은 프레임워크가 기본으로 제공해주고 있기 때문에 하나의 프로젝트를 세팅하는 데 있어서 필요한 여러가지 사항을 프레임워크가 제공해주고 있어서 이런 시간을 아끼고, 애플리케이션의 기능적인 부분을 개발하는 데에 더 집중할 수 있도록 도와준다.

주요 특징

Routing : 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트를 제공한다.
Rendering : 클라이언트 사이드 렌더링, 서버 사이드 렌더링, 정적 렌더링, 동적 렌더링 등 모든 렌더링 방식을 사용할 수 있다.
Data Fetching : 서버 컴포넌트에서 async/await 키워드를 통해서 데이터 fetch를 간단하게 실행할 수 있고, API 요청에 대한 메모이제이션, 데이터 캐싱, revaildation 등의 기능도 제공한다.
Styling : Styled-Components와 더불어 인기 있는 스타일링 도구인 Tailwind CSS를 기본적으로 제공한다.
Optimiztation : 사용자 경험을 증대시키기 위해서 이미지, 글꼴, 스크립트를 최적화 할 수 있는 컴포넌트나 방법을 제공한다.
TypeScript : 타입 스크립트를 공식적으로 지원해서, 타입 검사와 컴파일 등이 더 개선되었다.

Next.js를 이제 배우기 시작한 개발자들은 Next.js 14 버전을 사용하게 된다. 이 버전부터 App Routing 방식으로 바뀌었는데, 이전까지는 Pages Router 방식이 사용되었었다.

구체적인 내용은 다른 포스트로 기술적인 내용과 함께 다루겠지만, 지금 보고 있는 레퍼런스가 Pages Router인지 App Router인지 구분해서 공부하는 것이 좋다.

Next.js를 배우기 위해서는 HTML, CSS, JavaScript, React.js에 대한 선행 지식이 있어야 한다. 그 외 Tailwind나 TanStack Query 등은 라이브러리이기 때문에 Next.js를 배우면서 필요하면 그 때 배워도 된다.