Next.js 15 새로운 기능 완전 정복 – 초보 개발자도 쉽게 따라 할 수 있는 가이드

왜 Next.js 15가 중요한가?

Next.js는 React 기반 프레임워크 중 가장 빠르게 성장하고 있는 프로젝트 중 하나이며, 매년 새로운 버전이 출시될 때마다 웹 개발 흐름에 큰 변화를 줍니다. 2026년 현재 Next.js 15가 정식 릴리즈되면서 성능 최적화, 개발 편의성, SEO에 대한 새로운 패러다임을 제시하고 있습니다. 특히 Next.js 공식 블로그에서는 이번 버전에서 도입된 주요 기능들을 상세히 소개하고 있어, 최신 웹 프로젝트를 시작하거나 기존 프로젝트를 업그레이드하려는 개발자라면 반드시 알아야 할 내용입니다.

Next.js 15 핵심 기능 총정리

이번 글에서는 Next.js 15에서 새롭게 추가된 주요 기능들을 네 가지 카테고리로 나누어 깊이 있게 살펴보겠습니다.

1. 강화된 App Router와 Layout System

• 파일 기반 라우팅이 더 간편해졌다 – `app/` 디렉터리 내부에 `page.tsx`, `layout.tsx`, `loading.tsx` 등을 배치하면 자동으로 라우트가 생성됩니다. 이제는 getServerSideProps 대신 fetch 기반의 데이터 패칭을 전역 레이아웃에서 선언할 수 있습니다.
• 동적 레이아웃 중첩 지원 – 기존에는 레이아웃을 중첩하려면 복잡한 _app.js 수정이 필요했지만, 이제는 layout.tsx를 중첩 디렉터리마다 두기만 하면 됩니다.
• 새로운 default.tsx 파일 – 레이아웃이 없는 경로에 자동으로 적용되는 기본 레이아웃 파일로, 페이지 단위에서 최소한의 UI 스켈레톤을 제공할 수 있습니다.

예시 코드를 통해 직접 확인해 보겠습니다.

// app/dashboard/layout.tsx
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export default function DashboardLayout({ children }) {
  return (
    <>
      <Header />
      <main className="container">{children}</main>
      <Footer />
    </>
  );
}

위와 같이 레이아웃을 정의하면 app/dashboard/page.tsx 안의 모든 페이지가 자동으로 헤더와 푸터를 공유합니다.

2. 서버 액션(Server Actions)과 React Server Components(RSC) 최적화

• Server Actions API – 클라이언트에서 직접 서버 함수를 호출할 수 있는 새로운 API가 도입되었습니다. 기존에 API Routes를 별도로 만들던 번거로움을 없애고, use server 지시자를 활용해 함수 선언만으로 서버 로직을 작성합니다.
• 자동 직렬화 및 에러 핸들링 – Server Actions는 인수와 반환값을 자동으로 직렬화해 전송하고, 에러 발생 시 클라이언트 측에 친절한 오류 메시지를 제공합니다.
• React Server Components와의 원활한 연동 – Server Actions를 RSC 내부에서 호출하면 데이터 패칭이 서버에서 바로 이루어져, 클라이언트 번들 크기를 크게 줄일 수 있습니다.

다음은 Server Action을 이용한 간단한 폼 제출 예시입니다.

// app/contact/page.tsx
'use client';
import { useState } from 'react';

// 서버 액션 정의 (app/contact/actions.ts)
export async function submitContact(formData) {
  'use server';
  // 여기서 DB 저장 또는 메일 전송 로직 수행
  await fetch('/api/send-mail', { method: 'POST', body: JSON.stringify(formData) });
  return { success: true };
}

export default function ContactForm() {
  const [status, setStatus] = useState(null);
  const handleSubmit = async (e) => {
    e.preventDefault();
    const data = {
      name: e.target.name.value,
      email: e.target.email.value,
      message: e.target.message.value,
    };
    const result = await submitContact(data);
    setStatus(result.success ? '전송 성공' : '전송 실패');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="이름" required />
      <input name="email" type="email" placeholder="이메일" required />
      <textarea name="message" placeholder="메시지" required />
      <button type="submit">보내기</button>
      {status && <p>{status}</p>}
    </form>
  );
}

위 코드는 use server 지시자를 통해 서버 전용 함수를 선언하고, 클라이언트 컴포넌트에서 바로 호출하는 형태입니다. 별도의 API 라우트를 만들 필요가 없으므로 코드베이스가 훨씬 깔끔해집니다.

3. Turbopack 2.0 기반 빌드 시스템

• 초고속 개발 서버 – Turbopack은 Webpack을 대체하는 차세대 빌드 툴로, 파일 변화 감지를 10배 이상 빠르게 처리합니다. 특히 next dev 명령어 실행 시 초기 로딩 시간이 1초 이하로 단축되었습니다.
• 스마트 캐시와 레이어드 번들링 – 코드 변경이 없는 모듈은 캐시에서 즉시 제공하고, 의존성 그래프를 레이어링해 페이지 단위로 최소 번들을 생성합니다.
• Edge Runtime 자동 최적화 – Turbopack은 Edge 서버에 배포될 때 자동으로 V8 isolate 친화적인 코드를 생성해, 응답 속도가 현저히 빨라집니다.

빌드 설정을 별도로 조정할 필요 없이 next.config.js에 experimental.turbopack 플래그만 켜면 됩니다.

// next.config.js
module.exports = {
  experimental: {
    // Turbopack 사용 활성화 (기본값: true)
    turbopack: true,
    // Edge Middleware 최적화
    serverActions: true,
  },
};

위 설정을 적용하고 npm run dev를 실행하면, 콘솔에 “Turbopack is handling the build” 라는 메시지가 표시됩니다.

4. 새로운 이미지 컴포넌트와 자동 포맷 변환

• next/image v4 – 이미지 최적화 로직이 완전히 재작성되어, AVIF, WebP, JPEG‑XL 등 최신 포맷을 자동으로 선택합니다.
• Lazy Loading이 기본값 – 별도 loading="lazy" 속성을 지정하지 않아도 이미지가 화면에 들어올 때만 로드됩니다.
• 이미지 CDN 통합 – Vercel Edge Network와 직접 연동되어, 이미지 요청이 가장 가까운 엣지 노드에서 제공됩니다.

다음은 새 이미지 컴포넌트를 활용한 코드 예시입니다.

// components/ResponsiveImage.tsx
import Image from 'next/image';

export default function ResponsiveImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={450}
      priority={false} // 자동 lazy
      quality={85}
      // 자동 포맷 변환 옵션 (옵션은 기본값이므로 생략 가능)
      // placeholder="blur" 로우 레벨 블러 효과 제공
    />
  );
}

위 컴포넌트를 사용하면 src에 지정된 이미지가 자동으로 최적화된 포맷으로 변환되고, CDN을 통해 전송됩니다.

실전 프로젝트에 Next.js 15 적용하기

이제 실제 프로젝트에 새 기능들을 적용하는 과정을 단계별로 정리해 보겠습니다.

1. 프로젝트 업그레이드
   • 기존 package.json에서 next 버전을 "15.0.0" 이상으로 변경하고 npm install 실행.
   • React 19와의 호환성을 위해 react와 react-dom도 최신 버전(19.x)으로 업데이트.
2. App Router 전환
   • 기존 pages/ 디렉터리를 app/ 구조로 마이그레이션. 페이지마다 page.tsx와 필요 시 layout.tsx를 추가.
   • 데이터 패칭 로직을 getStaticProps·getServerSideProps에서 fetch·Server Actions 기반으로 변환.
3. Server Actions 도입
   • 폼 제출, 인증, 결제 등 서버와 직접 통신하는 로직을 use server 함수로 구현.
   • 에러 핸들링을 위해 try / catch 블록과 errorBoundary 컴포넌트를 활용.
4. Turbopack 활성화
   • 위에서 언급한 next.config.js 설정을 추가하고, npm run dev로 개발 서버를 재시작.
   • 빌드 속도가 크게 개선된 것을 콘솔 로그와 next build --profile 결과로 확인.
5. 이미지 최적화 적용
   • 프로젝트 전역에서 next/image를 사용하도록 교체.
   • 이미지 파일을 public/ 폴더에 두고, src에 상대 경로를 지정.

위 과정을 차근차근 진행하면, 기존 프로젝트도 최신 Next.js 15의 성능과 개발 편의성을 그대로 누릴 수 있습니다.

핵심 요약 및 다음 단계

Next.js 15는 App Router 강화, Server Actions 도입, Turbopack 2.0 기반 초고속 빌드, 그리고 자동 이미지 최적화라는 네 가지 핵심 축을 중심으로 설계되었습니다. 각각의 기능은 다음과 같은 장점을 제공합니다.

• **레이아웃 중첩**과 **파일 기반 라우팅**으로 UI 구조가 명확해짐.
• **Server Actions**으로 API 라우트를 별도로 만들 필요 없이 서버 로직을 직접 호출.
• **Turbopack**을 통한 개발 서버와 빌드 속도 혁신.
• **next/image v4**로 이미지 로딩 속도와 품질 최적화.

다음 단계로는 프로젝트에 하나씩 적용해 보는 실습을 권장합니다. 먼저 app/ 구조를 잡고, 간단한 Server Action을 만들며, Turbopack이 제공하는 빌드 로그를 확인해 보세요. 차근차근 진행하다 보면 자연스럽게 Next.js 15의 전체 흐름을 몸에 익힐 수 있습니다.

궁금한 점이나 직접 겪은 이슈가 있다면 댓글로 알려 주세요! 여러분의 피드백이 더 나은 Next.js 활용법을 만들게 합니다.