Next.js 15, 달라진 점 싹 다 훑어보기!

Next.js 15, 달라진 점 싹 다 훑어보기!

Next.js 15가 드디어 출시되었습니다! 이번 버전은 개발자들의 생산성과 웹사이트 성능 향상에 초점을 맞춘 다양한 기능들을 선보이는데요.

 

지금부터 Next.js 15의 주요 변경 사항들을 하나씩 살펴보면서, 업그레이드를 통해 얻을 수 있는 혜택들을 알아볼까요?

1. @next/codemod CLI, 자동 업그레이드로 편리하게!

Next.js 15에서는 @next/codemod CLI를 사용하여 기존 코드베이스를 자동으로 변경할 수 있습니다.

 

터미널에서 다음 명령어를 실행하면, 현재 프로젝트의 Next.js 버전이 최신 버전(또는 프리릴리즈 버전)으로 업그레이드되고, 필요한 코드 변경 사항들이 자동으로 적용됩니다.

npx @next/codemod@canary upgrade latest

 

복잡한 수작업 없이 최신 Next.js 기능을 빠르게 적용하고, 코드 호환성까지 자동으로 보장받을 수 있다니, 정말 편리하죠?

2. 비동기 요청 API, 성능 향상의 비밀! (중요 변경 사항)

기존 SSR(Server-Side Rendering) 방식에서는 서버가 클라이언트에 콘텐츠를 제공하기 전에 모든 요청이 완료될 때까지 기다려야 했습니다.

 

하지만 Next.js 15에서는 필요한 데이터만 비동기적으로 요청하고, 해당 데이터만 기다리는 방식으로 변경되었습니다.

 

즉, 특정 요청에 의존하는 데이터(headers, cookies, params, searchParams)는 비동기 API로 변환해야 합니다.

 

걱정 마세요! @next/codemod CLI를 사용하면 코드베이스를 간편하게 마이그레이션할 수 있습니다.

npx @next/codemod@canary next-async-request-api .

 

변경 전 (Next.js 14):

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata | undefined> {
  // params가 즉시 사용 가능한 데이터로 제공
  const post = getAllPosts().find((post) => post.slug === params.slug); 
  return { title: post.title };
}

 

변경 후 (Next.js 15):

export async function generateMetadata(props: {
  params: Promise<{ slug: string }>; 
}): Promise<Metadata | undefined> {
  // 이제 params는 Promise 객체, await로 기다려야 함
  const { slug } = await props.params; 
  const post = getAllPosts().find((post) => post.slug === slug); 
  return { title: post.title };
}

 

기존 방식에서는 모든 요청 데이터가 준비될 때까지 기다린 후에 페이지를 렌더링했기 때문에, 특정 데이터가 필요하지 않더라도 불필요한 대기 시간이 발생했습니다.

 

Next.js 15에서는 필요한 데이터만 await로 기다리므로, 불필요한 대기 시간을 줄이고, 필요한 데이터를 기다리는 동안 다른 렌더링 작업을 시작하여 효율성을 높입니다.

 

Next.js 15의 비동기 처리 방식은 서버의 전체적인 성능과 페이지 로딩 속도를 향상시킵니다.

 

서버는 요청 데이터가 준비될 때까지 기다리지 않고, 가능한 작업을 미리 처리하여 페이지 응답 속도를 높입니다.

 

3. 유연하고 섬세한 캐시 전략, 이제 내 맘대로!

Next.js 15에서는 캐시 전략을 더욱 유연하고 섬세하게 조정할 수 있도록 변경되었습니다.

 

Next.js 14에서는 데이터가 서버에 있으면 언제든 캐시를 사용하여 데이터를 즉시 가져오는 방식이 기본 설정이었습니다.

 

즉, 페이지나 API 데이터가 항상 캐시되어 최신 데이터가 즉시 반영되지 않는 경우가 있었습니다.

 

Next.js 15에서는 기본적으로 캐시가 비활성화되어 있으며, 최신 데이터를 표시하는 방식으로 변경되었습니다. 개발자는 필요에 따라 캐시를 활성화하고 설정을 조정할 수 있습니다.

GET 루트 핸들러 캐시

• Next.js 14: GET 요청을 사용하는 API는 기본적으로 캐시가 적용되어, 동일한 데이터를 여러 번 요청해도 빠르게 가져올 수 있었습니다.
• Next.js 15: GET 요청 API는 기본적으로 캐시를 사용하지 않도록 변경되어, 매번 최신 데이터를 요청합니다.
  • 캐시가 필요한 경우: export const dynamic = "force-static" 설정을 추가하여 캐시를 활성화할 수 있습니다. 예를 들어, 자주 업데이트되지 않는 sitemap.ts 파일에는 캐시를 설정하면 더욱 빠르게 가져올 수 있습니다.

클라이언트 라우터 캐시

• Next.js 14.2: Next.js는 클라이언트가 페이지를 이동할 때 이전 페이지를 캐시하여, 페이지 간 이동 속도를 높였습니다.
• Next.js 15: 페이지 이동 시 항상 최신 데이터를 가져와, 각 페이지에 최신 정보가 반영됩니다.

단, 다음과 같은 캐시 동작은 유지됩니다.

• 레이아웃 데이터는 다시 요청되지 않고, 빠르게 재사용됩니다.
• 이전/다음 페이지 이동 시, 브라우저가 스크롤 위치를 기억하여 스크롤이 유지됩니다.
• loading.js는 최대 5분 동안 캐시되어, 로딩 화면이 빠르게 표시됩니다.
• next.config.ts에서 캐시 시간 설정 가능

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30, // 클라이언트 라우터에서 30초 동안 캐시 유지
    },
  },
};

export default nextConfig;

 

핵심:

• 항상 최신 데이터 표시: 페이지 이동 시 항상 최신 데이터가 표시됩니다.
• 필요한 경우에만 캐시 사용: 특정 API나 데이터에 캐시 설정을 추가하여 성능을 향상시킬 수 있습니다.

 

4. React 19, 안정성과 성능 향상!

React 19는 아직 RC(Release Candidate) 상태이지만, Next.js 팀은 React 팀과 긴밀히 협력하여 React 19의 안정성을 확보했고, Next.js 15 버전에 React 19를 적용하여 출시했습니다.

npm install babel-plugin-react-compiler

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

export default nextConfig;

 

(주의) React 컴파일러를 사용하려면 Babel 플러그인을 설치해야 합니다. 이로 인해 개발 환경이나 빌드 시간이 느려질 수 있습니다.

 

5. Turbopack Dev, 쾌적한 개발 환경!

next dev --turbo 명령어를 사용하면, 안정적이고 빠른 개발 환경을 경험할 수 있습니다.

 

6. 정적 루트 표시기, 한눈에 파악!

개발 환경에서 Next.js 15는 정적 루트 표시기를 제공합니다. 이 표시기를 통해 각 루트가 정적 루트인지 동적 루트인지 쉽게 확인할 수 있습니다.

7. 서버 액션(함수) 보안 강화, 안심하고 사용!

서버 액션(use server)은 클라이언트에서 서버의 특정 함수를 직접 호출할 수 있는 기능입니다.

 

하지만 클라이언트에 노출될 가능성이 있어 보안에 대한 우려가 있었습니다.

 

Next.js 15에서는 서버 액션의 보안이 강화되었으며, 성능도 향상되었습니다.

 

8. 정적 생성 제어 기능(실험적), 빌드 속도 UP!

빌드 속도를 높이기 위해, 정적 페이지 생성 방법을 세밀하게 조정할 수 있는 실험적인 옵션이 추가되었습니다.

• staticGenerationRetryCount: 정적 페이지 생성 실패 시 재시도 횟수 설정 (기본값: 1, 필요한 경우에만 변경 권장)
• staticGenerationMaxConcurrency: 각 worker가 동시에 처리할 수 있는 페이지 수 (빌드 속도에 영향)
• staticGenerationMinPagesPerWorker: 새로운 worker가 시작되기 전에 처리할 최소 페이지 수 (worker 리소스 최적화)

// next.config.ts
const nextConfig = {
  experimental: {
    staticGenerationRetryCount: 1,         // 빌드 실패 시 1회 재시도
    staticGenerationMaxConcurrency: 8,     // 각 worker가 처리할 최대 페이지 수
    staticGenerationMinPagesPerWorker: 25, // worker 시작 전 처리할 최소 페이지 수
  },
};

export default nextConfig;

9. 그 외 추가 변경 사항

기타 추가 변경 사항은 공식 블로그의 릴리스 노트에서 확인할 수 있습니다.

10. 마무리

Next.js 15는 개발자들의 생산성 향상과 웹사이트 성능 최적화를 위한 다양한 기능들을 제공합니다.

 

자동 코드 업그레이드, 비동기 요청 API, 유연한 캐시 전략, React 19 지원 등, Next.js 15의 새로운 기능들을 적극 활용하여 더욱 효율적이고 강력한 웹 애플리케이션을 개발해 보세요!

 

---