NEXT.js 13,14,15 버전비교 및 v15 검토 (2025.5.30)

nextjs v13를 정리한것이 어제 같은데  오늘 확인해보니  마지막 버전은 15.3.2로 나오네요.

( 검토 의견 : 15 버전에 부분 사전 랜더링(ppr) 기대해서 샘플코딩을 했지만 아직 정식 버전이 아닌듯 싶네요. 그래도 14버전부터 적용 방법이 있었고, 15 버전 최신을 적용해서 샘플 코딩했습니다. )

 

각 버전별 주요 특징 비교

Next.js v13 제일 큰 변화는 서버랜더링 페이지와 클라이언트랜더링 파일명으로 분리 적용 및 라우터 개선으로 기억하고 있습니다.

2023.04.24 - [프로그램/react] - nextjs 13 검토 ( 2023.4 )

nextjs 13 검토 ( 2023.4 )

v14와 v15 특징을 검색해보면 다음과 같이 나오네요.

항목	Next.js 14	Next.js 15
App Router	안정화 및 기본값으로 설정	App Router 중심으로 전면 전환
Pages Router	여전히 지원	점진적 제거 예정, App Router 권장
React Server Components (RSC)	기능 확장	최적화 및 활용성 증대
Layouts	안정화, 사용 편의성 증가	기능 강화 + 유연성 증가
Streaming & Suspense	안정화	더욱 향상된 스트리밍 경험
Data Fetching	revalidate 안정화	fetching 성능 및 DX 향상
Server Actions	정식 출시	기능 강화 및 활용성 증가
Partial Prerendering (PPR)	Preview 도입	정식 출시 + 성능 개선 핵심 기능
Turbopack	성능 개선 진행 중	더 빠르고 안정적인 개발 서버
Metadata API	기능 개선	SEO 중심 기능 향상
React 통합	React 18 최적화	React 19 + React Compiler 포함
주요 목표	App Router 안정화	React 19 통합, DX 개선, Server Actions/PPR 정식화
주요 변화	App Router 기본값 전환	React Compiler 등 React 19 기반 변화

v15 특징은 부분 랜더링과 컴파일 부분일것 같네요. 랜더링관련해서 강제로 지정하는 구문이 바뀐것인지 봐야 할 것 같습니다.

---

Nextjs latest Version 시작 가이드

1. 설치

2. 프로젝트 구조

3. 레이아웃

4. Partial Prerendering

5. 샘플코딩

일단 이정도만 샘플로 구경하면 될것 같네요.

프로젝트 사용시 좀더 정리해서 공유하도록 하겠습니다.

• 공식홈페이지

https://nextjs.org/docs

Introduction | Next.js

 

 

1. 설치

node.js v18이후 버전이 기본 설치 되어 있어야 하고 패키지 관리까지 설치 되어 있어야 합니다. 

> node --version
v22.16.0

 

next.js 설치 및 프로젝트 생성 

E:\workspace\react\nextjstest> npx create-next-app@latest
Need to install the following packages:
create-next-app@15.3.3
Ok to proceed? (y) y

√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in E:\workspace\react\nextjstest\my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss

added 109 packages, and audited 110 packages in 40s

39 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at E:\workspace\react\nextjstest\my-app

2. 프로젝트 구조 - Next.js v15 폴더 구조

초기 자동 생성 폴더

📁 Next.js 15 기반 클린 아키텍처 폴더 구조
app/                      # favicon.ico, layout.tsx, page.tsx
public/                   # 정적 파일 svg

package.json

 

📁 Next.js 15 기반 클린 아키텍처 폴더 구조
app/                      # App Router 기반의 라우팅 (Next.js 15 중심)
  └── (routes)/           # biz 분류 ( comm-login, auth, main ... ) 
      └── page.tsx        # 페이지 진입점 (React Server Component)
      └── layout.tsx      # 중첩 레이아웃 구성
      └── loading.tsx     # 로딩 상태 Suspense fallback
      └── error.tsx       # 에러 핸들링
  └── api/                # Route Handlers (서버 API 핸들링)
      └── users/route.ts  # 예: GET, POST 처리를 위한 Server Action
components/               # UI 구성 요소 (Client Components 위주)
  └── Button.tsx
  └── Header.tsx
features/                 # 도메인별 기능 분리 (Use Case 중심)
  └── user/
      └── components/     # 해당 도메인 전용 컴포넌트
      └── services.ts     # 서비스 계층
      └── actions.ts      # 서버 액션 정의
      └── types.ts        # 타입 정의
lib/                      # 외부 API, 유틸리티, 설정
  └── api.ts              # Axios or fetch 설정
  └── constants.ts        # 앱 전역 상수
  └── helpers.ts          # 유틸 함수
models/                   # 도메인 모델 (비즈니스 로직 객체)
  └── user.ts
store/                    # 상태 관리 (optional: Zustand, Redux 등)
  └── userStore.ts
public/                   # 정적 파일
styles/                   # Tailwind, 글로벌 CSS
  └── globals.css
  └── tailwind.config.ts
tests/                    # 테스트 코드 (Jest, Testing Library)
types/                    # 글로벌 타입 선언
  └── next-env.d.ts

 

폴더명	설명
app/	Next.js 15의 핵심 App Router 구조. 레이아웃, 페이지, 에러 처리 등 포함
components/	공통적으로 재사용 가능한 클라이언트 컴포넌트
features/	도메인/기능 단위로 비즈니스 로직을 분리하여 확장성과 테스트 용이성 향상
lib/	설정, 헬퍼 함수, 외부 API 클라이언트 모음
models/	비즈니스 모델 정의. 도메인 개체를 객체 중심으로 추상화
store/	전역 상태 관리 (필요 시 사용)
public/	이미지 등 정적 자원
styles/	글로벌 및 유틸리티 스타일
tests/	단위/통합 테스트 모음
types/	글로벌 타입/인터페이스 선언 공간

3. 레이아웃

Next.js v15 레이아웃 관련 주요 변경점
- 비동기 레이아웃 함수 지원
Next.js 15에서는 layout.tsx(또는 layout.js) 파일에서 레이아웃 컴포넌트를 async 함수로 작성할 수 있게 변경되었습니다.

기존에는 동기 함수로만 레이아웃을 작성했다면, 이제 비동기 데이터 패칭이 필요한 경우 아래와 같이 사용할 수 있습니다.

// Before (동기)
export default function Layout({ children }) {
  return <>{children}</>;
}

// After (비동기)
export default async function Layout({ children }) {
  const data = await fetchData();
  return <>{children}</>;
}

이 변경으로 레이아웃에서 서버 데이터 패칭이 자연스럽게 가능해졌으며, params 등도 비동기로 받아올 수 있습니다.
- params, headers, cookies, searchParams API의 비동기화
headers, cookies, params, searchParams 등 주요 API가 모두 비동기 함수로 변경되었습니다.
예를 들어, headers()를 동기적으로 호출하던 기존 방식에서 이제는 반드시 await headers()처럼 비동기로 호출해야 합니다.

import { headers } from 'next/headers';

// Before
const headersList = headers();

// After
const headersList = await headers();

이로 인해 레이아웃이나 서버 컴포넌트에서 해당 API를 사용할 때 async/await 패턴이 필수적으로 적용됩니다.

 

- 공통 레이아웃 구조와 중첩
레이아웃의 구조적 개념(폴더별 layout.tsx 작성, Slot 방식의 children prop, 중첩 레이아웃 등)은 기존과 동일하게 유지됩니다.
/app/layout.tsx가 루트 레이아웃이 되고, 하위 경로별로 별도의 레이아웃을 추가해 중첩할 수 있습니다.

- 기타 관련 변경점
레이아웃에서 사용하는 draftMode 역시 비동기 함수로 변경되었습니다. 따라서 await draftMode()로 호출해야 합니다.
레이아웃 데이터는 서버에서 리페치되지 않고, partial rendering(부분 프리렌더링)과 같은 최적화 기능이 강화되었습니다.

4. Partial Prerendering - 아직 실험적 기능입니다. (canary  버전에서만 가능)

Next.js 새 버전의 Partial Rendering 성능 향상
 - 기존 방식과의 차이
기존 SSR(서버 사이드 렌더링)이나 CSR(클라이언트 사이드 렌더링)에서는 페이지 이동이나 데이터 변경 시 전체 페이지 또는 컴포넌트 트리 전체를 다시 렌더링하는 경우가 많았습니다. 이로 인해 불필요한 렌더링과 데이터 전송이 발생하고, 초기 로딩 속도와 페이지 전환 속도가 느려질 수 있었습니다.

기존 React의 Virtual DOM은 실제 DOM 업데이트를 최소화하지만, 상태나 props 변화 시 해당 컴포넌트 트리 전체가 다시 렌더링되는 구조라서 대규모 페이지에서는 성능 저하가 발생할 수 있습니다.

 - Partial Rendering의 성능 향상 포인트
빠른 초기 표시: Partial Rendering(PPR)은 빌드 시 정적 콘텐츠(shell)를 미리 생성하여, 사용자가 페이지에 접근하면 즉시 정적 부분을 보여줍니다. 동적 데이터가 필요한 부분은 "hole"로 남겨두고, 서버에서 비동기로 데이터를 받아오며 점진적으로 채워집니다.

부분적 데이터 스트리밍: 동적 콘텐츠는 서버에서 병렬로 스트리밍되기 때문에, 전체 페이지가 준비될 때까지 기다릴 필요 없이 필요한 부분만 빠르게 로드할 수 있습니다.

공통 레이아웃 유지: 페이지 간 이동 시 변경된 부분만 다시 렌더링하고, 공통된 레이아웃이나 요소는 그대로 유지됩니다. 이로써 불필요한 렌더링과 데이터 재전송이 줄어듭니다.

데이터 전송 및 네트워크 오버헤드 감소: 정적 HTML과 동적 부분이 하나의 HTTP 요청으로 전송되어, 네트워크 오버헤드가 줄고 전체 성능이 향상됩니다.

더 부드러운 사용자 경험: Suspense와 결합해 동적 데이터가 준비되는 동안 로딩 UI를 자연스럽게 보여주고, 사용자는 즉시 페이지의 주요 구조를 볼 수 있어 체감 속도가 크게 빨라집니다.

 

5. 샘플코딩

5.1 프로젝트 생성 및 초기 동작 확인

E:\workspace\react\nextjstest>npx create-next-app@latest
Need to install the following packages:
create-next-app@15.3.3
Ok to proceed? (y) y

√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in E:\workspace\react\nextjstest\my-app.

> cd my-app
> npm  run dev

npm warn Unknown env config "upgrade". This will stop working in the next major version of npm.

> my-app@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.3.3 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://172.30.0.1:3000

 ✓ Starting...
 ✓ Ready in 3.2s
 ○ Compiling / ...
 ✓ Compiled / in 4s
 GET / 200 in 4789ms
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 888ms
 GET /favicon.ico?favicon.45db1c09.ico 200 in 1275ms

 

 

5.2 Partial Rendering 특징을 살리는 Next.js 샘플 코드
Partial Rendering(PPR)은 정적 콘텐츠와 동적 콘텐츠를 한 페이지에서 자연스럽게 결합하는 것이 특징입니다. 이를 위해 정적 부분은 즉시 렌더링되고, 동적 부분은 React의 Suspense로 감싸서 데이터 준비가 끝나는 즉시 스트리밍됩니다. 아래는 이러한 특징을 살린 실제 샘플 코드입니다.

// canary 버전이어야 실행이 가능하다고 합니다.

npm install next@canary

// package.json  
// "next" : "15.3.3"
//  => "next": "^15.4.0-canary.57",

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental', // PPR 활성화
  },
};

export default nextConfig;

// app/layout.tsx
export const experimental_ppr = true
 
export default function Layout({ children }: { children: React.ReactNode }) {
  // ...
}

// app/page.tsx
import { Suspense } from 'react';
import StaticComponent from './StaticComponent';
import DynamicComponent from './DynamicComponent';
import Fallback from './Fallback';

export const experimental_ppr = true; // 해당 라우트에서 PPR 활성화

export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

// app/StaticComponent.tsx
export default function StaticComponent() {
  return <div>이 부분은 항상 정적으로 미리 렌더링됩니다.</div>;
}

// app/DynamicComponent.tsx
export default async function DynamicComponent() {
  // 예시: 서버에서 데이터 패칭 (딜레이 추가)
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return <div>이 부분은 동적으로 서버에서 데이터를 받아와 렌더링됩니다.</div>;
}

// app/Fallback.tsx
export default function Fallback() {
  return <div>동적 데이터 로딩 중...</div>;
}

-- 실행화면

로딩중