소개

Next.js 15와 React 19가 출시되면서 웹 개발의 새로운 장이 열렸습니다. 이 글에서는 두 프레임워크의 주요 변경사항과 실무에서 어떻게 활용할 수 있는지 살펴보겠습니다.

Next.js 15의 주요 기능

1. Turbopack 안정화

빌드 속도가 기존 Webpack 대비 최대 700% 향상되었습니다. 🚀

// next.config.ts
export default {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
        },
      },
    },
  },
};

2. Server Components 기본 활성화

모든 컴포넌트가 기본적으로 Server Component로 동작합니다.

// app/page.tsx
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data.title}</div>;
}

React 19의 혁신

• Server Actions: 서버 로직을 클라이언트에서 직접 호출
• use() Hook: Promise와 Context를 더 쉽게 다룰 수 있음
• Document Metadata: 컴포넌트 내에서 직접 메타데이터 관리

마치며

Next.js 15와 React 19는 개발 생산성과 성능을 모두 향상시켜줍니다. 새 프로젝트를 시작한다면 꼭 고려해보세요!