태그
목차
Next.js 소개
생성일: 2024-02-01
수정일: 2024-02-01
Next.js란?
Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크다. 사용자 인터페이스를 구축할 때는 React 컴포넌트를 사용하고, 추가 기능과 최적화를 위해서는 Next.js를 사용한다.
내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성한다. 따라서 구성에 시간을 소비하는 대신 애플리케이션을 빌드하는 데 집중할 수 있다.
개인 개발자이든 대규모 팀의 일원이든 Next.js는 인터랙티브하고 동적이며 빠른 React 애플리케이션을 구축하는 데 도움이 될 수 있다.
주요 기능
다음은 몇 가지 주요 Next.js 기능이다:
| 기능 | 설명 |
|---|---|
| 라우팅 | 서버 컴포넌트로 구축된 파일 시스템 기반 라우터로 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원한다. |
| 렌더링 | 클라이언트 & 서버 컴포넌트를 사용한 클라이언트 사이드 & 서버 사이드 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링을 더욱 최적화했다. Edge 및 Node.js 런타임에서 스트리밍한다. |
| 데이터 페칭 | 서버 컴포넌트에서 async/await 를 활용한 간소화된 데이터 페칭 및 요청 메모이제이션, 데이터 캐싱 및 재검증을 위한 확장된 fetch API. |
| 스타일링 | CSS Modules, Tailwind CSS, CSS-in-JS 등 선호하는 스타일링 방식을 지원한다. |
| 최적화 | 이미지, 글꼴 및 스크립트 최적화를 통해 애플리케이션의 코어 웹 바이탈(CWV) 및 사용자 경험을 개선한다. |
| 타입스크립트 | 타입 검사 및 효율적인 컴파일을 위한 개선된 타입스크립트 지원과 커스텀 타입스크립트 플러그인 및 타입 검사기 지원 |
앱 라우터 vs 페이지 라우터
Next.js에는 앱 라우터와 페이지 라우터라는 두 가지 라우터가 있다. 앱 라우터는 서버 컴포넌트 및 스트리밍과 같은 React의 최신 기능을 사용할 수 있는 최신 라우터다. 페이지 라우터는 서버 렌더링된 React 애플리케이션을 빌드할 수 있게 해주는 오리지널 Next.js 라우터이며, 이전 Next.js 애플리케이션을 지원한다.
참조