Next 15 업데이트 변경사항

Next 15 주요 변경점

Next.js 15 버전이 2024. 10. 21일 자로 출시되었다

미리 정리는 해놓았지만 블로그에 글은 이제야 쓴다..ㅎㅎ

 

현재는 Next.15.3 버전까지 릴리즈 되었고, 이 글은 15 버전의 주요 변경점만 다루기로 한다.

해당글은 Next.js 15.1 버전까지의 정리 내용으로 현재 버전과 차이가 있을 수 있습니다.

https://nextjs.org/blog/next-15

Next.js 15

추가로 Next.js 15 버전의  x-middleware-subrequest 헤더 보안 취약점 이슈로 인해

Next.js 15.2.3 이후버전을 설치하기를 권장한다.

https://socket.dev/blog/next-js-patches-critical-middleware-vulnerability

주요 기능

1. 자동 업데이트 CLI 추가(@next/codemod)

• Next 버전 쉽게 입데이트 가능
• 아래 명령어 이용으로 자동화가 가능하지만 일부 되지 않는 부분은 수동으로 업데이트해야 됨.

# Use the new automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@rc react-dom@rc

 

 

2. React 19 지원

• React 19 RC에 추가된 기능들을 지원함

3. Async Request APIs (주요)

• 동기식 API가 이제 비동기식으로 변경
  • cookies
  • headers
  • draftMode
  • params in layout.js, page.js, route.js, default.js, opengraph-image, twitter-image, icon, and apple-icon.
  • searchParams in page.js
• 기존 서버 사이드 렌더링시 서버가 요청을 기다린 후 렌더링 하던 API들을 비동기 식으로 사용할 수 있게 됨.

//before
import { cookies } from 'next/headers'
 
export default function Page() {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

//after
import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

 

 

4. Caching Semantics (주요)

• GET Route Handlers와 Client Router Cache의 기본 캐싱을 기본적으로 캐시 됨에서 기본적으로 캐시 되지 않음으로 변경
  • GET Route Handlers : export dynamic = ‘force-static’과 같은 옵션으로 캐싱강제 가능
  • Client Router Cache : 필요에 따라 설정 가능

//아래 설정으로 기존 버전 디폴트 캐시 설정이 가능함
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
export default nextConfig;

• fetch 요청도 더 이상 캐시되지 않음

//필요에 따라 설정가능
export default async function RootLayout() {
	const a = await fetch('https://...') // Not Cached
	const b = await fetch('https://...', { cache: 'force-cache' }) // Cached

// ...
}

 

 

 

5. Hydration Error 강화

• 서버 렌더링과 클라이언트 렌더링의 불일치로 발생하는 Hydration 오류를 메시지를 좀 더 상세하게 볼 수 있다.

before hydration error

 

after hydration error

6. <Form> Component

• 폼 요소를 확장한 최적화 컴포넌트, prefetching, client-side navigation 등의 기능 제공
  • prefetching : 폼 UI를 미리 prefetch 할 수 있음
  • client-side navigation : submit을 하였을 때, clinet-side state가 보존됨.

// Note: This is abbreviated for demonstration purposes.
// Not recommended for use in production code.
 
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export default function Form(props) {
  const action = props.action
  const router = useRouter()
 
  useEffect(() => {
    // if form target is a URL, prefetch it
    if (typeof action === 'string') {
      router.prefetch(action)
    }
  }, [action, router])
 
  function onSubmit(event) {
    event.preventDefault()
 
    // grab all of the form fields and trigger a `router.push` with the data URL encoded
    const formData = new FormData(event.currentTarget)
    const data = new URLSearchParams()
 
    for (const [name, value] of formData) {
      data.append(name, value as string)
    }
 
    router.push(`${action}?${data.toString()}`)
  }
 
  if (typeof action === 'string') {
    return <form onSubmit={onSubmit} {...props} />
  }
 
  return <form {...props} />
}

 

 

 

7. Turbopack Dev

• next dev —turbo 모드가 안정화되어 더 빠른 개발 환경 및 반응 속도를 제공함.
  • Up to 76.7% faster local server startup.
  • Up to 96.3% faster code updates with Fast Refresh.
  • Up to 45.8% faster initial route compile without caching (Turbopack does not have disk caching yet).
• 하지만 일부 CSS 속성이 안 먹는 현상과, vanilla-extract와 호환이 안 맞는다.

 

8. Next.config.ts 지원

• NextConfig 타입을 지원한다.

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* config options here */
};
 
export default nextConfig;

 

 

 

9. Static Route indicator

• 아래 이미지와 같이 각 라우트가 정적인 라우트인지 동적인 라우트인지 알 수 있음

실행하면 좌측 하단에서 확인할 수 있다

10. after

• after는 렌더링, API 응답이 완료 된 후, 처리할 작업을 예약하여 로깅 및 구글 애널리틱스 같은 요청에 대해 유용하게 사용할 수 있다.
• 15.1 버전에서 stable로 바뀜

import { after } from 'next/server'
// Custom logging function
import { log } from '@/app/utils'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // Execute after the layout is rendered and sent to the user
    log()
  })
  return <>{children}</>
}

 

개선사항

• Improvements for self-hosting
  • 자체 호스팅을 캐시 제어 헤더를 제한함으로써 개선하였고, 이미지 최적화 성능 개선
• ESLint 9 Support
  • ESLint 9를 제공함.

• Development and Build Improvements
  • 서버 컴포넌트의 HMR(Hot Module Replacement) 기능 개선
  • App Router 정적 페이지 생성 개선
  • Advanced Static Generation Control (Experimental)

//세부 세팅도 가능하다.
const nextConfig = {
  experimental: {
    // how many times Next.js will retry failed page generation attempts
    // before failing the build
    staticGenerationRetryCount: 1
    // how many pages will be processed per worker
    staticGenerationMaxConcurrency: 8
    // the minimum number of pages before spinning up a new export worker
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

 

• instrumentation.js (안정화)
  • Next.js 서버 수명 주기 등 성능 모니터링 관찰을 위한 훅 OpenTelemetry, Sentry 등 상태 모니터링 툴과 통합 가능

//instrumentataion.js
export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // init your favorite observability provider SDK
}