[Next.js] Next15 시작하기

Next15

• Next.js의 15번째 주요 버전으로, 리액트 기반 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 더 현대적으로 제공한다.

무엇이 달라졌는가

App Router의 강화

• app 디렉토리 구조가 정립되어 라우팅 기능이 더 직관적으로 변했다.
• 기존 pages 방식과는 다른 동적 라우팅, 레이아웃 분리, 서버 컴포넌트, 클라이언트 컴포넌트 구분이 명확하다.

서버 컴포넌트(Server Components)

• React 18 이후 도입된 서버 컴포넌트를 전면적으로 활용하여, 클라이언트 코드와 분리된 서버 전용 컴포넌트를 작성할 수 있다.
• 서버 컴포넌트에서는 브라우저 자바스크립트 번들 크기를 줄이고, 데이터 패칭을 더 쉽게 처리한다.

데이터 패칭 방식의 진화

• fetch와 react query 같은 라이브러리 없이도 서버에서 직접 비동기 데이터 패칭이 가능하다.
• Suspense/Stream 방식 지원으로 사용자 경험을 개선.

레이아웃 시스템

• routes마다 별도의 layout.tsx 파일을 배치할 수 있어, 페이지별로 UI 구조를 쉽게 분리 관리할 수 있다.

서버 액션(Server Actions)

• 서버에서 직접 실행되는 액션(데이터 처리, 변경, 인증 등)을 클라이언트에서 손쉽게 호출할 수 있는 기능 추가.

번들 최적화와 성능

• 빌드 타임 최적화, 코드 분할, 캐시 처리 등 웹 성능 최적화를 자동화하여 더 빠르고 효율적인 서비스를 제공한다.

Next15에서는 서버/클라이언트 컴포넌트를 명확히 구분하고, 데이터 패칭 및 처리 방식이 한층 발전된 점이 핵심이다.
App Router 구조, 레이아웃 확장성, 서버 액션 등 새로운 패러다임에 맞춰 코드를 작성해야 한다. Next.js를 처음 접하는 사람도 개념만 잘 숙지하면 빠르게 생산성 있게 개발할 수 있다.

앞으로 Next.js 15버전에 대한 포스팅을 이어보려고 한다.