Skip to Content
Suffering builds character
아카이브9.Next.js개요1.Next.js 개요

1.Next.js 개요

  1. Full-stack 웹 애플리케이션을 구현하기 위한 React 기반의 Framework

  2. 개발자는 React 기반의 컴포넌트를 통해 UI를 만들고, Next.js는 몇 가지 추가 기능과 최적화를 제공함

  3. 개발자가 서비스 구현에만 집중할 수 있도록 번들링, 컴파일 및 환경 설정 등을 도와줌

2. Next.js 핵심 특징

FeatureDescription
RoutingA file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.

파일 기반 방식의 직관적인 라우팅 기능 제공
레이아웃, 중첩 라우팅, 로딩 스피너, 에러 처리 등을 간단하게 구현할 수 있음
RenderingClient-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.

SPA 기반의 Client-Side Rendering(CSR) 렌더링 방식의 단점을 해소시켜주는 다양한 렌더링 기법(SSR, SSG, ISR), Streaming 등을 제공
Data FetchingSimplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.

서버 컴포넌트에서의 data fetching 작업을 단순화하고, fetch API를 확장하여 요청 메모이제이션, 캐싱, 재검증 기능을 제공
StylingSupport for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS

CSS Modules, Tailwind CSS, CSS-in-JS 등 다양한 방식으로 CSS 스타일링을 적용할 수 있도록 지원
OptimizationsImage, Fonts, and Script Optimizations to improve your application’s Core Web Vitals and User Experience.

이미지, 폰트, 스크립트 태그 등 정적 리소스에 대한 용량을 최적화하여 Core Web Vital을 개선하고, 사용자 경험을 증가시켜줌
TypeScriptImproved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.

TypeScript에 대한 지원 방식 개선, 고도화된 타입 체킹과 효율적인 컴파일 등을 제공
Last updated on