Next.js 15: 새로운 기능과 향상된 성능으로 더욱 강력해진 Next.js

Next.js 15는 React 기반 서버 사이드 렌더링(SSR) 프레임워크의 새로운 이정표를 제시하며, 개발자들에게 더욱 편리하고 효율적인 개발 환경을 제공합니다. 이번 포스팅에서는 Next.js 15의 주요 변경점과 새롭게 추가된 기능들을 자세히 살펴보고, 실제 예제를 통해 어떻게 활용할 수 있는지 알아보겠습니다.

1. 자동화된 업그레이드 CLI

Next.js 15에서는 @next/codemod CLI를 통해 이전 버전에서 새 버전으로의 업그레이드를 자동화했습니다. 이를 통해 수동으로 코드를 변경해야 하는 번거로움을 줄이고, 업그레이드 과정을 간소화할 수 있습니다.

npx @next/codemod@canary upgrade latest

 

2. 비동기 요청 API (중요 변경사항)

Next.js 15에서는 비동기 요청 API가 도입되어 서버 사이드 렌더링 성능이 향상되었습니다. 이제 서버는 클라이언트 요청을 기다리지 않고 미리 데이터를 페칭할 수 있어 더욱 빠른 응답을 제공할 수 있습니다.

// as-is
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

// Next.js 15
export async function generateMetadata({ params }: { params: { slug: string }; }): Promise<Metadata | undefined> {
  // params await 없이 사용
  const post = getAllPosts()
  // ...
}

 

3. 캐싱 기본값 변경

Next.js 15에서는 데이터 캐싱의 기본값이 force-dynamic으로 변경되었습니다. 이는 모든 요청에 대해 동적으로 데이터를 페칭하도록 설정되어 항상 최신 데이터를 제공합니다. 필요에 따라 캐싱 설정을 변경할 수 있습니다.

4. React 19 지원

Next.js 15는 React 19를 지원하여 React 생태계의 최신 기능을 활용할 수 있습니다.

5. <Form> 컴포넌트

새롭게 추가된 <Form> 컴포넌트는 서버 사이드 유효성 검사, 파일 업로드 등의 기능을 간편하게 구현할 수 있도록 도와줍니다.

<Form>
  <input type="text" name="email" />
  <button type="submit">Submit</button>
</Form>

 

6. Turbopack Dev 안정화

Turbopack Dev는 Next.js의 개발 서버 성능을 획기적으로 향상시키는 새로운 컴파일러입니다. Next.js 15에서는 Turbopack Dev가 더욱 안정화되어 빠른 개발 환경을 제공합니다.

7. 정적 라우트 표시기

정적 라우트를 시각적으로 확인할 수 있는 기능이 추가되어 개발 편의성이 향상되었습니다.

추가 기능 및 개선점

• React Compiler: React Compiler를 지원하여 더욱 유연하고 효율적인 컴포넌트 개발이 가능합니다.
• 새로운 훅: useActionState 훅을 통해 액션의 상태를 쉽게 관리할 수 있습니다.
• 개선된 서버 사이드 렌더링: 서버 사이드 렌더링 성능이 더욱 향상되어 빠른 페이지 로딩을 제공합니다.

결론

Next.js 15는 자동화된 업그레이드, 비동기 요청 API, 새로운 컴포넌트 등 다양한 기능을 통해 개발자 경험을 향상시켰습니다. 또한, Turbopack Dev를 통한 성능 향상은 더욱 빠르고 효율적인 개발 환경을 제공합니다. Next.js 15를 통해 더욱 빠르고 안정적인 React 애플리케이션을 개발해 보세요.

 

참고:

• Next.js 공식 문서: https://nextjs.org/docs
• Next.js 15 릴리즈 노트: https://nextjs.org/blog/next-15

주의: 위 내용은 Next.js 15의 주요 변경점을 간략하게 요약한 것입니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.