Next.js가 뭐예요? - Next.js 소개 | Next.js

Next.js 에 대해 알아봅니다.

 

 

---

Next.js가 뭐예요? What is Next.js?

풀스택 웹 애플리케이션을 만들기 위한 React 프레임워크입니다.

UI 생성에 리액트 컴포넌트를 사용하며, 추가적인 기능들과 최적화를 위해 Next.js를 사용합니다.

Next.js는 번들링, 컴파일링 등의 React를 위해 필요한 설정을 추상화하고 자동으로 만들어줌으로써 설정하는데 쓰는 시간을 줄여주어 애플리케이션을 구축하는데 집중할 수 있게 해줍니다.

 

Next.js의 메인 기능 Main Features

• 라우팅 Routing
• 화면 랜더링 Rendering
• 데이터 가져오기 Data Fetching
• 스타일링 Styling
• 최적화 Optimization
• 타입스크립트 TypeScript

 

Next.js 안에는 뭐가 있나요? What's in Next.js?

• 최적화 내장
  UX와 웹 바이틀 향상을 위한 이미지, 폰트, 스크립트 자동 최적화
• 동적 HTML 스트리밍
  App Router와 React Suspense를 통합하여 서버에서 즉시 UI 생성
• React 서버 컴포넌트
  최신 React 기능 내장, 클라이언트의 Javascript 없이 컴포넌트 추가
• 데이터 가져오기
  데이터와 React 컴포넌트 async, await 처리
  * 서버와 클라이언트 모두 지원
• CSS 지원
  CSS 모듈, Taildwindcss, 유명한 다른 라이브러리를 사용하여 스타일링
• 클라이언트와 서버 랜더링
  각 페이지 단계에서 ISR(Incremental Static Regeneration, 향상된 정적 재생성)을 포함한 유연한 랜더링과 캐싱 옵션
• 서버 액션(Server Action)
  API를 생략하고 메소드(function)로 서버 코드 실행
  한번의 네트워크 통신으로 캐시된 데이터와 유효성 재검증하고 UI 업데이트
• 경로 처리(Route Handlers)
  인증 처리나 웹 hook을 위한 서드파티 서비스와의 안전한 연결을 위한 API 엔드포인트 생성
• 고급 라우팅 & 중첩 레이아웃
  더욱 고급의 라우팅 패턴과 UI 레이아웃 지원을 포함한 파일 시스템 기반의 라우팅
• 미들웨어
  들어오는 요청(Incoming Request) 처리

 

필수 사전 지식 Pre-Requisite Knowledge

• HTML
• CSS
• React
  Components, Props, State, Hooks, Server Component, Suspense

 

 

Docs | Next.js