"Life is Full of Possibilities" - Soul, 2020

IT (프론트엔드)

[Next.js] 버전 업데이트 내역 번역 및 정리 (15.2 - 15.5)

m2ndy 2025. 11. 19. 22:31

 

 

 

 

 

프로젝트 중 Sentry와 Turbopack 프로덕션 적용을 위해 Next.js 버전을 15.1.3에서 15.5.0으로 업데이트했습니다.

그 과정에서 Next.js 블로그의 릴리즈 노트를 정리한 업데이트 내용을 공유합니다.

 

 

Next.js 15.2 Release Note

  • 개발 중 오류 시 발생하던 UI를 개편, 오류 스택 개선
  • 개발 지표 (Dev Indicator) 통합
  • 스트리밍 메타데이터
    • 동적 데이터를 가져오거나 비동기 작업을 해야 할 때는 generateMetadata로 수행했었습니다. 이전 버전에서는 초기 UI가 <head>에 추가되기 전에 이 메타데이터가 만들어져야 했습니다.
      • 15.2 버전에서는 generateMetadata가 완료되기 전에도 초기 UI를 화면에 띄울 수 있게 되어 이 문제를 개선했습니다.
      • 이는 사용자에게 시각적으로 표시되는 내용이 아닌 데이터들로 인해 초기 paint 단계가 지연되는 문제를 개선합니다.

Next.js Blog

  • 15.2 버전에서는 metadata 와 page를 불러오는 과정을 병렬로 진행하여 streamed metadata response, streamed page response로 병렬로 로딩할 수 있게 되었습니다.

 

  • 기존 방식에서는 사용자가 페이지를 요청했을 때 서버는 모든 generateMetadata 함수가 끝날 때까지 기다린 뒤, 완성된 HTML을 한 번에 보냈습니다.
  • 반면 15.2 버전에서는 스트리밍 방식을 사용하여 사용자가 페이지를 요청했을 때 일단 화면의 HTML부터 먼저 보낸 뒤 메타데이터가 완성되면 <head> 데이터를 보냅니다.
    • 사용자는 메타데이터보다 화면을 더 먼저 보게 되어 페이지 로딩 속도가 더 빠르다고 느끼게 됩니다.
  • 하지만 문제점이 있습니다. 봇이나 크롤러는 스트리밍 방식을 이해하지 못합니다. 페이지에 접속했을 때 가장 처음에 받은 HTML의 <head> 태그에 모든 정보가 들어있을 것으로 예상하지만, 스트리밍 방식에서는 <head> 태그가 비어있습니다. ⇒ 검색 결과에 제대로 노출되지 않아 SEO에 문제가 발생합니다.
    • 15.2 버전에서는 페이지에 방문자가 사람인지 봇인지를 확인한 뒤 방문자가 봇일 경우 기존 방식처럼 메타데이터가 완성될 때까지 HTML 전송을 의도적으로 차단하고, 완성되었을 때 <head> 데이터가 채워진 HTML을 전송합니다.

 

  • Turbopack 성능 개선
    • 컴파일 시간이 57.6% 단축되었습니다.
    • (vercel에서) 메모리 사용량이 30% 감소되었습니다.
  • React view 전환 (실험)
    • View Transitions API를 추가하여 서로 다른 뷰와 컴포넌트 사이에 애니메이션이 가능하게 되었습니다.
      • SPA에서 페이지를 이동하거나 뷰를 전환할 때 브라우저 수준에서 애니메이션을 적용할 수 있게 되었습니다.
  • 미들웨어 기능을 Node.js 환경에서 실행 가능(실험)
    • Next.js의 미들웨어 기능은 엣지에서만 동작했었기 때문에 가벼운 기능만 지원이 가능했습니다. 그러나 15.2 버전부터는 모든 라이브러리를 미들웨어에서 사용할 수 있게 되었습니다.
    • 실험적인 기능이기 때문에 프로덕션에서는 사용하지 않는 것을 권장합니다.

 

 

 

Next.js 15.3 Release Note

  • Turbopack build
    • next dev 에서만 사용할 수 있었던 turbopack이 빌드 시에도 알파 버전으로 사용할 수 있게 되었습니다.
    • experimental.turbo 객체 내에서 설정했던 turbopack을 이제는 next.config.js의 최상위에서 에서 설정합니다.
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // 15.2 이하: experimental: { turbo: { ... } }
  // 15.3 이상:
  turbopack: {
    // Turbopack 관련 세부 규칙을 여기에 추가합니다.
    // (예: SVGR 로더 설정)
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

 

  • Client Instrumentation Hook
    • instrumentation-client.js(ts) 파일을 만들어 코드가 실행되기 전에 실행되는 모니터링이나 분석 코드를 추가할 수 있습니다.
  • Navigation Hooks
    • onNavigate: Link 의 속성으로, 클라이언트 사이드의 내비게이션 동안 실행되어 라우팅 동작을 정밀하게 제어할 수 있게 합니다. SPA에 사용될 수 있으며, 코드를 실행하거나 preventDefault로 내비게이션을 취소할 수도 있습니다. 따라서 전환 애니메이션이나 내비게이션 가드, 분석 트래킹과 같은 기능에 사용될 수 있습니다.
    • useLinkStatus: 페이지 이동 중임을 boolean으로 나타냅니다. 페이지 전환 중 로딩 인디케이터를 추가할 때 사용됩니다.
  • Typescript 플러그인 성능 개선
    • Next.js Typescript 서버 플러그인(LSP)의 성능이 개선되었습니다.
    • LSP: 서버와 클라이언트 경계를 검증하거나, 컴포넌트의 prop에 대한 힌트, 자동 완성과 같은 인라인 자동 완성 및 코드 검사 기능을 제공합니다. 따라서 IDE에서 Next.js 프로젝트를 다룰 때 DX가 향상되었습니다.

 

 

 

 

Next.js 15.4 Release Note

  • Turbopack build 개선
    • 내부 테스트를 100% 통과하여 이전의 알파 버전보다 안정성이 개선되었습니다.

 

 

 

 

Next.js 15.5 Release Note

  • Turbopack 프로덕션 빌드 베타 버전 출시
    • 프로덕션 서비스 빌드시에도 turbopack을 베타 버전으로 사용할 수 있습니다. Webpack과 비교하여 2배에서 5배까지 빌드 속도가 빨라졌습니다. (프로젝트 규모가 클수록 크게 개선됩니다.)
    • 일부 CSS 파일이 Webpack과 다른 순서로 연결될 수 있습니다.
  • Node.js 미들웨어 안정화
    • runtime: 'nodejs' 설정을 통해 미들웨어에서 모든 Node.js API와 NPM 패키지를 안정적으로 사용할 수 있게 되었습니다.
    • Typescript 개선
      • Link 태그 <Link href="..."> 사용 시 존재하지 않는 페이지 경로를 입력하면 Typescript가 즉시 에러를 표시합니다. next.config.ts 에 typedRoutes: true를 추가하여 사용할 수 있습니다.
      • 라우트 타입 헬퍼: 페이지나 레이아웃을 만들 때 params나 searchParams 타입을 interface에 정의할 필요가 없어졌습니다. LayoutProps 나 PageProps 를 사용해서 자동으로 파일 경로 (/dashboard/[slug]) 를 분석해서 params가 { slug: string } 타입을 가진다는 것을 자동으로 인식합니다.
// 이전

import { Metadata } from 'next';
 
interface Props {
  params: Promise<{ slug: string }>;
  children: React.ReactNode;
  analytics: React.ReactNode; // Manual parallel route typing
  team: React.ReactNode; // Manual parallel route typing
}
 
export default function DashboardLayout(props: Props) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* No type safety for parallel routes */}
      {props.team} {/* No type safety for parallel routes */}
    </div>
  );
}

 

// 개선 이후
// No need to import LayoutProps - globally available
export default function DashboardLayout(props: LayoutProps<'/dashboard'>) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* Fully typed parallel route slot */}
      {props.team} {/* Fully typed parallel route slot */}
    </div>
  );
}

 

 

  • next typegen 명령어 추가
    • next dev 나 next build 없이도 수동으로 타입을 생성할 수 있게 되었습니다.
    • 기존의 Next.js는 폴더 구조를 기반으로 PageProps 나 LayoutProps 등 라우트 관련 타입을 자동으로 생성했습니다. 그러나 이 타입 파일들은 next dev 나 next build 시에만 생성되었습니다.
    • 따라서 개발자가 타입 오류를 검사하기 위해 tsx --noEmit 같은 타입 검사 명령어를 실행하면 Next.js가 아직 타입 파일을 만들어주지 않은 상태였기 때문에 엉뚱한 타입 오류가 발생하는 문제가 있었습니다.
    • next typegen 은 dev 나 build 없이 타입 파일 생성만 실행해주는 명령어입니다. 보통 CI/CD에서 사용될 수 있습니다. 따라서 CI에서 next build를 하지 않고도 next typegen으로 타입 파일을 먼저 생성한 뒤, npm run type-check로 프로젝트 전체의 타입 오류를 빠르게 검사할 수 있게 되었습니다.
  • next lint 명령어 중단
    • lint 대신 ESLint나 Biome을 사용하도록 변경됩니다.
    • 이 단계를 없애고 package.json에 eslint .나 biome check . 처럼 린터(Linter)를 직접 호출하는 방식으로 바뀝니다. 개발자가 린트 설정을 직접 제어할 수 있도록 하고, 더 빠른 Biome도 공식적으로 지원합니다.
      • npx @next/codemod@latest next-lint-to-eslint-cli . 명령어를 실행하면 기존 next lint 설정을 자동으로 새로운 방식으로 변환해 줍니다.
    {
  "scripts": {
    // ESLint projects
    "lint": "eslint", // Instead of "next lint"
    "lint:fix": "eslint --fix",
 
    // For Biome projects
    "lint": "biome check",
    "format": "biome format --write"
  }
}

 

    • Next.js 16 버전에서 제거되는 기능에 대한 경고 표시
      • Next.js 16 버전부터 <Link> 안에 <a> 태그를 넣는 방식이 사라집니다. 따라서 이 코드에 대한 경고 메시지가 표시됩니다.
      • next/image에서 Image quality를 1에서 100까지 입력할 수 있었는데 (<Image src="/photo.jpg" quality={100} alt="Photo" />), 이제 75가 아닌 값을 쓰려면 설정에서 다음 작업이 필요합니다.
const nextConfig = {
  images: {
    qualities: [75, 100], // Explicitly allow quality={100}
  },
};
 
export default nextConfig;

 

    • Next.js 16부터 이미지의 src 경로에 쿼리 문자열을 사용하려면 next.config.ts 에 명시적으로 나타내야 합니다.
      • ex. <Image src="/photo.jpg?v=1" />
const nextConfig = {
  images: {
    localPatterns: [
      {
        pathname: '/photo.jpg', // allow exact path
        // omitting "search" will allow all query parameters
      },
      {
        pathname: '/photo.jpg', // allow exact path
        search: '?v=1', // allow exact query parameters
      },
      {
        pathname: '/assets/**', // allow wildcard path
        search: '', // empty search will block all query parameters
      },
    ],
  },
};
 
export default nextConfig;

 

저작자표시 비영리 변경금지 (새창열림)

'IT (프론트엔드)' 카테고리의 다른 글

[Next.js] Trie를 사용해서 네트워크 요청 없이 자동완성 구현하기 (Typescript, Zustand)  (1) 2025.08.27
[Next.js] URL path variable 정책이 바뀌었을 때 SEO 설정을 어떻게 해야 할까  (0) 2025.07.22
[Typescript] Trie (트라이) 자료구조 직접 구현하기  (0) 2025.06.25
MCP와 Cursor를 활용한 Figma 컴포넌트 퍼블리싱  (2) 2025.04.06
API call 최적화를 고려한 자동 완성 Input ComboBox 구현 (React, Typescript, Vanilla-extract)  (1) 2025.01.05

'IT (프론트엔드)'의 다른글

  • 현재글[Next.js] 버전 업데이트 내역 번역 및 정리 (15.2 - 15.5)

관련글

티스토리툴바