Next.js 15.1 업데이트 : 새로운 기능과 개발자 경험 개선

2024년 12월 10일, Next.js 15.1이 정식으로 출시되었다.
이번 릴리즈는 React 19 정식 지원, 개선된 오류 디버깅, 안정화된 after() API, 새로운 인증 오류 처리 API와 같은 다양한 업데이트를 포함하고 있다. 15.1버전에서 제공하는 새로운 기능들을 살펴보고, 각 기능이 어떤 영향을 미치는지 알아보자!

주요 업데이트

• React 19 정식 지원
• 개선된 오류 디버깅
• 안정화된 after() API
• 새로운 인증 오류 처리 API : forbidden() 및 unauthorized() (experimental)

1. React 19 정식 지원

Next.js 15.1은 React 19를 정식으로 지원한다. React 19는 Pages Router와 App Router에서 모두 사용할 수 있으며, 안정성과 성능 면에서 중요한 개선 사항을 제공한다.

Pages Router와 App Router에서의 지원

• Pages Router: 이제 안정화된 React 19를 사용할 수 있어, Release Candidate나 Canary 버전을 사용할 필요 없이 안정적으로 모든 기능을 활용할 수 있다.
• App Router: 이제 안정화된 React 19를 사용할 수 있어, Release Candidate나 Canary 버전을 사용할 필요 없이 안정적으로 모든 기능을 활용할 수 있다.

2. 개선된 오류 디버깅

Next.js 15.1에서는 오류 디버깅 경험을 대폭 개선했다. 오류 발생 시 불필요한 정보를 숨기고 애플리케이션 코드에 집중할 수 있도록 개선되어, 개발자가 문제의 원인을 더 빠르고 직관적으로 파악할 수 있게 되었다.

Source Map 개선
소스 맵 개선을 통해 오류의 출처를 더 정확하게 파악할 수 있다.

• ignoreList 속성 도입: 외부 종속성의 스택 프레임을 숨겨 애플리케이션 코드가 디버깅의 중심이 되도록 했다.
  - 외부 라이브러리로 인해 발생하는 스택 프레임의 혼란을 줄이고, 중요한 애플리케이션 코드만 보여준다.
  - 라이브러리 개발자들도 소스 맵에 ignoreList 속성을 추가하도록 권장된다.
• Turbopack 지원: Webpack보다 더 정교한 소스 맵 처리를 제공한다.
  - 함수 이름과 메서드 호출 정보를 더 정확히 추적할 수 있다.
  - Turbopack을 사용하면 정밀한 소스 맵으로 오류의 근원을 파악하기 쉬워진다.

Edge 런타임 오류 처리
Edge 런타임 환경에서의 오류 처리가 더욱 개선되었다.

• 일관된 오류 표시: 이전에는 Edge 런타임에서 오류 메시지만 출력되고 스택 트레이스가 제공되지 않았으나, 이제는 개발 환경에 관계없이 오류와 스택 트레이스가 명확히 출력된다.
• 개선된 스택 프레임 출력: 브라우저, 터미널, 디버거에서 동일한 포맷으로 스택 정보를 확인할 수 있어 디버깅 경험이 통일되었다.

Terminal Before:

⨯ app/page.tsx (6:11) @ eval
 ⨯ Error: boom
    at eval (./app/page.tsx:12:15)
    at Page (./app/page.tsx:11:74)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
digest: "380744807"
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |           ^
  7 |   }, [])
  8 |
  9 |   throwError()
 GET / 500 in 2354ms

Terminal After:

  ⨯ Error: boom
    at eval (app/page.tsx:6:10)
    at Page (app/page.tsx:5:32)
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |          ^
  7 |   }, [])
  8 |
  9 |   throwError() {
  digest: '225828171'
}

3. 안정화된 after() API

Next.js 15.1에서는 after() API가 안정화되었다. 이 API는 응답 스트리밍이 완료된 후에도 추가 작업을 실행할 수 있도록 지원하며, 주로 로그 기록, 데이터 처리, 시스템 동기화와 같은 비차단 작업에 사용된다. 응답 성능을 유지하면서도 부가 작업을 분리해 실행할 수 있어 효율적인 작업 처리가 가능하다.

역할

• 비차단 작업 처리: 주요 응답을 스트리밍한 뒤, 추가 작업(예: 로그 기록, 쿠키 업데이트)을 수행한다.
• 성능 최적화: 응답 성능을 저하시키지 않고 부가 작업을 처리할 수 있다.

사용 예제

import { after } from 'next/server';

export default function Layout({ children }) {
  after(() => {
    console.log('응답 후 작업 수행');
  });

  return <>{children}</>;
}

이 간단한 형태로 after()는 응답 흐름을 방해하지 않고 추가 작업을 처리할 수 있는 유연성을 제공한다.

4. 새로운 인증 오류 처리 API: forbidden() 및 unauthorized() (experimental)

Next.js 15.1에서는 새로운 인증 오류 처리 API인 forbidden()과 unauthorized()를 도입했다. 이 API는 기존의 notFound() API와 유사한 방식으로 동작하며, 사용자 인증 및 권한 관리를 더욱 세밀하게 처리할 수 있도록 설계되었다.

• forbidden(): 403 오류를 발생시키며, 사용자에게 접근이 금지된 자원에 대한 메시지를 제공한다.
• unauthorized(): 401 오류를 발생시키며, 로그인하지 않은 사용자에게 인증 요청 메시지를 제공한다.

설정 및 사용 방법

1. 기능 활성화 next.config.ts 파일에 다음 설정 추가:

const nextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
export default nextConfig;

2. API 활용

• 403 오류 처리:

import { forbidden } from 'next/navigation';

export default async function AdminPage() {
  const session = await verifySession();
  if (session.role !== 'admin') forbidden();
  return <h1>관리자 페이지</h1>;
}

• 401 오류 처리:

import { unauthorized } from 'next/navigation';

export default async function ProtectedPage() {
  const session = await verifySession();
  if (!session) unauthorized();
  return <h1>인증된 페이지</h1>;
}

3. 커스터마이징 가능한 오류 페이지
forbidden.tsx와 unauthorized.tsx 파일을 생성하여 맞춤 UI를 제공할 수 있다.

• 403 오류 페이지

import Link from 'next/link';

export default function Forbidden() {
  return (
    <div>
      <h2>접근 금지</h2>
      <p>이 자원에 대한 접근 권한이 없습니다.</p>
      <Link href="/">홈으로 돌아가기</Link>
    </div>
  );
}

• 401 오류 페이지

import Link from 'next/link';

export default function Unauthorized() {
  return (
    <div>
      <h2>인증 필요</h2>
      <p>이 페이지에 접근하려면 로그인해야 합니다.</p>
      <Link href="/login">로그인 페이지로 이동</Link>
    </div>
  );
}

느낀점

Next.js는 빈번한 업데이트를 통해 개발자들에게 항상 새로운 기능과 개선된 경험을 제공하며, 최신 웹 개발 트렌드에 맞춰 나아가는 모습을 보여주고 있다. 이러한 빠른 업데이트 주기는 개발자들에게 새로운 기능과 도구를 빠르게 접할 기회를 주는 동시에, 적응해야 할 부분이 많아지고 기존 코드와의 호환성 문제를 고민해야 하는 부담을 안기기도 한다. 그러나 이러한 부담을 감수하더라도 지속적인 발전과 혁신을 이루어나가는 Next.js의 행보는 매우 인상적이다.

이번 업데이트를 바로 적용해보고 개선된 Next.js의 기능을 직접 체험할 계획이다. 새로운 기능들이 실제 프로젝트에서 어떤 영향을 미칠지 경험해보는 것이 기대된다. 앞으로의 업데이트에서도 Next.js가 어떤 방향으로 나아갈지 더욱 기대하게 된다.