Framework

Next.js 15의 새로운 기능들

React 19와 함께하는 Next.js 15의 혁신적인 기능들을 알아봅니다

#Next.js#React#Web Development

Next.js 15가 출시되었습니다!

Next.js 15는 React 19와 함께 많은 새로운 기능과 개선사항을 제공합니다.

주요 기능

1. Turbopack (Stable)

Turbopack이 드디어 안정화되었습니다! 이제 프로덕션 빌드에서도 사용할 수 있습니다.

# 개발 서버
npm run dev --turbopack
 
# 프로덕션 빌드
npm run build --turbopack

성능 개선:

  • 최대 700배 빠른 업데이트
  • 10배 빠른 콜드 스타트
  • 메모리 사용량 50% 감소

2. React 19 지원

React 19의 새로운 기능들을 바로 사용할 수 있습니다:

'use client';
 
import { use } from 'react';
 
export default function UserProfile({ userPromise }) {
  // use() 훅으로 Promise 직접 사용
  const user = use(userPromise);
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

3. 개선된 캐싱 전략

// app/posts/route.ts
export async function GET() {
  const posts = await db.posts.findMany();
 
  return Response.json(posts, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400'
    }
  });
}

마이그레이션 가이드

package.json 업데이트

{
  "dependencies": {
    "next": "15.5.5",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  }
}

App Router 활용

// app/blog/[slug]/page.tsx
import { posts } from '@/.velite';
import { notFound } from 'next/navigation';
 
interface Props {
  params: Promise<{ slug: string }>;
}
 
export async function generateStaticParams() {
  return posts.map((post) => ({
    slug: post.slug,
  }));
}
 
export default async function PostPage({ params }: Props) {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);
 
  if (!post) notFound();
 
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.body }} />
    </article>
  );
}

성능 최적화 팁

  1. 이미지 최적화: next/image 사용
  2. 폰트 최적화: next/font 사용
  3. 번들 크기 분석: @next/bundle-analyzer 사용
  4. 동적 임포트: 코드 스플리팅 활용

결론

Next.js 15는 개발자 경험과 성능 모두를 크게 개선했습니다. 지금 바로 업그레이드하여 최신 기능들을 경험해보세요!