Next.js 15

Next.js 버전 15가 배포되었다. 기존 14와 어떤 변경점들이 있는지 공식문서를 살펴보자.

우선, 버전 업그레이드를 위해 아래의 커맨드를 입력하자

npm i next@rc react@rc react-dom@rc eslint-config-next@rc

yarn add next@rc react@rc react-dom@rc eslint-config-next@rc

pnpm up next@rc react@rc react-dom@rc eslint-config-next@rc

15버전을 사용하기위해서는 React v19를 필요로 하기 때문에 리액트도 업그레이드 해줘야한다. 추가적으로, 타입스크립트를 사용한다면, @types/react, @types/react-dom 또한 업그레이드가 필요하다.

변경점

비동기 요청

첫번째는 비동기 요청이다.

기존 SSR에서는 컨텐츠를 로드하기 전에 서버 요청을 기다렸다. 그런데 모든 컴포넌트에서 요청 데이터를 사용하는 것이 아니기 때문에, 비효율적인 부분이 있었다. 이에 따라 headers, cookies, params, searchParams 들이 비동기 API로 전환되었다.

// Next.js 14
export default function Page({ searchParams }: { searchParams: { [key: string]: string } }) {
  return <div>Query: {searchParams.query}</div>;
}

// Next.js 15
export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string }> }) {
  const resolvedParams = await searchParams;
  return <div>Query: {resolvedParams.query}</div>;
}

위 예시처럼 searchParams가 비동기 API기 때문에 promise 객체를 await를 통해 다루어야 한다.

또한, headers, cookies가 비동기로 변경되어 병렬 데이터 처리가 가능해졌다.

import { headers } from 'next/headers';

export async function GET() {
  const headerData = await headers();
  const userAgent = headerData.get('user-agent');
  return new Response(`User-Agent: ${userAgent}`);
}

캐싱

두번째는 캐싱이다.

fetch와 GET 라우트 핸들러가 더이상 캐싱되지 않는다.

const data = await fetch('https://api.example.com/data'); 

기본적으로 no-store로 설정되기 때문에 캐싱하고 싶다면 명시적으로 설정해줘야 한다. 설정 옵션은 아래와 같다.

• no-store : 요청 결과마다 데이터를 새롭게 가져온다.

• force-cache : 요청결과를 캐싱하고 데이터를 재사용한다.

• revalidate : stale time 동안 데이터를 캐싱해 사용하고, 이후에는 새롭게 가져온다.

const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache', // 위 3개 옵션을 설정한다.
});

추가적으로 캐싱된 데이터의 만료 전까지는 기존 데이터를 사용하고 백그라운드에서 새 데이터를 가져오는 방법인 stale-while-revalidate 가 사용이 가능하다.

const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 }, // 60초 동안 캐시된 데이터 사용
});

이외에 자잘한 변경사항들을 좀 더 살펴보자면, npx @next/codemod@canary upgrade latest 커맨드를 통해 간편하게 버전 업그레이드가 가능하다.

또한 기존 next dev로 실행하던 개발 서버를 next dev --turbo를 통해 보다 빠른 개발서버 구성이 가능해졌다.