Next.js 16
Next.js 블로그 포스트 번역
2025년 10월 21일
Next.js 16이 출시되었습니다. 이번 릴리스는 Turbopack, 캐싱, Next.js 아키텍처에 대한 최신 개선 사항을 제공합니다. 이전 베타 릴리스 이후, 여러 새로운 기능과 개선 사항이 추가되었습니다:
- Cache Components: Partial Pre-Rendering (PPR)과 캐시를 사용하여 즉각적인 탐색을 가능하게 하는 새로운 모델입니다.
- Next.js Devtools MCP: 디버깅과 워크플로우 개선을 위한 Model Context Protocol 통합입니다.
- Proxy: 네트워크 경계를 명확히 하기 위해
proxy.ts로 대체된 미들웨어입니다.
- DX: 빌드 및 개발 요청에 대한 로깅이 개선되었습니다.
이전 베타 릴리스부터 제공되었던 기능들:
- Turbopack (stable): 모든 앱에 대해 기본 번들러로, 최대 5-10배 빠른 Fast Refresh와 2-5배 빠른 빌드를 제공합니다.
- Turbopack File System Caching (beta): 대형 앱의 경우 더욱 빠른 시작 및 컴파일 시간을 제공합니다.
- React Compiler Support (stable): 자동 메모이제이션을 위한 내장 통합입니다.
- Build Adapters API (alpha): 빌드 프로세스를 수정하기 위한 커스텀 어댑터를 생성할 수 있습니다.
- Enhanced Routing: 레이아웃 중복 제거 및 점진적 프리페칭을 통한 최적화된 탐색과 프리페칭을 제공합니다.
- Improved Caching APIs: 새로운
updateTag()와 개선된revalidateTag()를 제공합니다.
- React 19.2: View Transitions,
useEffectEvent(),<Activity/>를 포함합니다.
- Breaking Changes: 비동기 매개변수,
next/image기본값 등 다양한 변경 사항이 있습니다.
Next.js 16으로 업그레이드하세요:
새로운 기능 및 개선 사항
Cache Components
Cache Components는 Next.js에서 캐싱을 보다 명시적이고 유연하게 만드는 새로운 기능 세트입니다. 이들은 페이지, 컴포넌트 및 함수를 캐시하기 위해 사용할 수 있는 새로운
"use cache" 지시문을 중심으로 하며, 컴파일러를 활용하여 사용되는 모든 곳에서 자동으로 캐시 키를 생성합니다.이전 버전의 App Router에서 발견된 암시적 캐싱과 달리, Cache Components를 사용한 캐싱은 전적으로 선택 사항입니다. 모든 동적 코드는 기본적으로 요청 시 실행되며, Next.js는 개발자가 풀스택 애플리케이션 프레임워크에서 기대하는 것과 더 잘 맞는 경험을 제공합니다.
Cache Components는 2023년에 처음 도입된 Partial Prerendering (PPR)의 이야기를 완성합니다. PPR 이전에는 Next.js가 각 URL을 정적으로 렌더링할지 동적으로 렌더링할지 선택해야 했으며, 중간 지점이 없었습니다. PPR은 이 이분법을 제거하고 개발자가 정적 페이지의 일부를 동적 렌더링(Suspense를 통해)으로 선택할 수 있게 하여 완전히 정적인 페이지의 빠른 초기 로드를 희생하지 않고도 가능합니다.
next.config.ts 파일에서 Cache Components를 활성화할 수 있습니다:Cache Components 및 사용 방법에 대한 자세한 내용은 10월 22일 Next.js Conf 2025에서 공유할 예정이며, 앞으로 몇 주 동안 블로그와 문서에서 더 많은 콘텐츠를 공유할 예정입니다.
참고: 베타 릴리스에서 이전에 발표된 대로, 이전의 실험적 experimental.ppr 플래그 및 구성 옵션은 Cache Components 구성으로 대체되었습니다.Next.js Devtools MCP
Next.js 16은 AI 지원 디버깅을 위한 Model Context Protocol 통합인 Next.js DevTools MCP를 도입합니다.
Next.js DevTools MCP는 AI 에이전트에게 다음을 제공합니다:
- Next.js 지식: 라우팅, 캐싱 및 렌더링 동작
- 통합 로그: 브라우저 및 서버 로그를 컨텍스트 전환 없이 제공
- 자동 오류 액세스: 수동 복사 없이 자세한 스택 추적 제공
- 페이지 인식: 활성 경로에 대한 컨텍스트 이해
이를 통해 AI 에이전트는 문제를 진단하고, 동작을 설명하며, 개발 워크플로우 내에서 직접 수정 제안을 할 수 있습니다.
proxy.ts (formerly middleware.ts)
proxy.ts는 middleware.ts를 대체하며 앱의 네트워크 경계를 명확히 합니다. proxy.ts는 Node.js 런타임에서 실행됩니다.- 해야 할 일:
middleware.ts를proxy.ts로 이름을 변경하고 내보낸 함수를proxy로 이름을 변경하세요. 로직은 동일하게 유지됩니다.
- 이유: 명확한 명명 및 요청 가로채기를 위한 단일 예측 가능한 런타임 제공
참고: middleware.ts 파일은 여전히 Edge 런타임 사용 사례에 사용할 수 있지만, 향후 버전에서 제거될 예정입니다.Logging Improvements
Next.js 16에서는 개발 요청 로그가 확장되어 시간이 소비되는 위치를 보여줍니다.
- 컴파일: 라우팅 및 컴파일
- 렌더: 코드 실행 및 React 렌더링
빌드도 확장되어 시간이 소비되는 위치를 보여줍니다. 빌드 프로세스의 각 단계는 완료하는 데 걸린 시간과 함께 표시됩니다.
Developer Experience
Turbopack은 개발 및 프로덕션 빌드 모두에 대해 안정성을 확보했으며, 이제 모든 새로운 Next.js 프로젝트의 기본 번들러입니다. 이번 여름 초 베타 릴리스 이후, 채택이 빠르게 확장되었습니다: Next.js 15.3+에서 개발 세션의 50% 이상과 프로덕션 빌드의 20%가 이미 Turbopack을 사용하고 있습니다.
Turbopack을 사용하면 다음을 기대할 수 있습니다:
- 2–5배 빠른 프로덕션 빌드
- 최대 10배 빠른 Fast Refresh
우리는 이러한 성능 향상을 모든 Next.js 개발자에게 제공하기 위해 Turbopack을 기본으로 설정하고 있습니다. 별도의 설정이 필요하지 않습니다. 커스텀 webpack 설정이 있는 앱의 경우, 다음 명령어를 실행하여 webpack을 계속 사용할 수 있습니다:
Turbopack은 이제 개발에서 파일 시스템 캐싱을 지원하여, 컴파일러 아티팩트를 실행 간에 디스크에 저장하여 특히 대형 프로젝트에서 재시작 간 컴파일 시간을 크게 단축합니다.
구성에서 파일 시스템 캐싱을 활성화하세요:
모든 내부 Vercel 앱은 이미 이 기능을 사용하고 있으며, 대형 저장소에서 개발자 생산성이 크게 향상되었습니다.
파일 시스템 캐싱을 사용해보고 경험을 공유해 주시면 감사하겠습니다.
create-next-app은 간소화된 설정 흐름, 업데이트된 프로젝트 구조 및 개선된 기본값으로 재설계되었습니다. 새로운 템플릿에는 기본적으로 App Router, TypeScript 우선 구성, Tailwind CSS 및 ESLint가 포함됩니다.Build Adapters RFC를 따라, 커뮤니티 및 배포 플랫폼과 협력하여 Build Adapters API의 첫 번째 알파 버전을 제공했습니다.
Build Adapters를 사용하면 빌드 프로세스에 연결할 수 있는 커스텀 어댑터를 생성하여 배포 플랫폼 및 커스텀 빌드 통합이 Next.js 구성을 수정하거나 빌드 출력을 처리할 수 있습니다.
RFC 토론에서 피드백을 공유하세요.
React Compiler의 1.0 릴리스 이후, Next.js 16에서 React Compiler에 대한 내장 지원이 안정화되었습니다. React Compiler는 수동 코드 변경 없이 불필요한 재렌더링을 줄이기 위해 컴포넌트를 자동으로 메모이제이션합니다.
reactCompiler 구성 옵션은 experimental에서 안정화로 승격되었습니다. 이 옵션을 활성화할 때 개발 및 빌드 중 컴파일 시간이 더 길어질 수 있습니다. React Compiler는 Babel에 의존하기 때문입니다.React Compiler 플러그인의 최신 버전을 설치하세요:
Core Features & Architecture
Enhanced Routing and Navigation
Next.js 16은 라우팅 및 탐색 시스템을 완전히 개편하여 페이지 전환을 더 가볍고 빠르게 만듭니다.
- 레이아웃 중복 제거: 여러 URL을 프리페칭할 때 공유 레이아웃이 있는 경우, 레이아웃은 각 링크에 대해 별도로 다운로드되는 대신 한 번만 다운로드됩니다. 예를 들어, 50개의 제품 링크가 있는 페이지는 이제 공유 레이아웃을 한 번만 다운로드하여 네트워크 전송 크기를 크게 줄입니다.
- 점진적 프리페칭: Next.js는 전체 페이지 대신 이미 캐시에 없는 부분만 프리페칭합니다. 프리페칭 캐시는 이제:
- 링크가 뷰포트에서 벗어날 때 요청을 취소합니다.
- 링크가 호버되거나 뷰포트에 다시 들어올 때 링크 프리페칭을 우선시합니다.
- 데이터가 무효화될 때 링크를 다시 프리페칭합니다.
- Cache Components와 같은 향후 기능과 원활하게 작동합니다.
- 트레이드오프: 더 많은 개별 프리페칭 요청을 볼 수 있지만, 총 전송 크기는 훨씬 낮습니다. 우리는 거의 모든 애플리케이션에 대해 이것이 올바른 트레이드오프라고 믿습니다. 요청 수 증가로 인해 문제가 발생하면 알려주세요. 우리는 데이터 청크를 더 효율적으로 인라인화하기 위한 추가 최적화를 작업 중입니다.
이러한 변경 사항은 코드 수정이 필요하지 않으며 모든 앱의 성능을 개선하도록 설계되었습니다.
Improved Caching APIs
Next.js 16은 캐시 동작에 대한 보다 명시적인 제어를 위한 정제된 캐싱 API를 도입합니다.
프로필 인수는 내장
cacheLife 프로필 이름(예: 'max', 'hours', 'days') 또는 next.config에 정의된 커스텀 프로필을 허용합니다. 또한 인라인 { expire: number } 객체를 전달할 수 있습니다. 대부분의 경우 max를 사용하는 것이 좋습니다. 이는 장기 콘텐츠에 대한 백그라운드 재검증을 가능하게 합니다. 사용자가 태그가 지정된 콘텐츠를 요청하면 Next.js가 백그라운드에서 재검증하는 동안 즉시 캐시된 데이터를 받습니다.revalidateTag()는 SWR 동작으로 적절하게 태그가 지정된 캐시 항목만 무효화하려는 경우에 사용하세요. 이는 최종 일관성을 허용할 수 있는 정적 콘텐츠에 이상적입니다.마이그레이션 가이드: SWR 동작을 위해cacheLife프로필(권장:max)을 두 번째 인수로 추가하거나, 읽기-쓰기 일관성이 필요한 경우 Server Actions에서updateTag()를 사용하세요.
updateTag()는 읽기-쓰기 일관성을 제공하는 새로운 Server Actions 전용 API로, 동일한 요청 내에서 만료되고 즉시 새 데이터를 읽습니다:이것은 대화형 기능이 변경 사항을 즉시 반영하도록 보장합니다. 양식, 사용자 설정 및 사용자가 업데이트를 즉시 보고자 하는 모든 워크플로우에 적합합니다.
refresh()는 캐시되지 않은 데이터만 새로 고치는 새로운 Server Actions 전용 API입니다. 캐시에는 전혀 영향을 미치지 않습니다:이 API는 클라이언트 측
router.refresh()를 보완합니다. 작업을 수행한 후 페이지의 다른 곳에 표시된 캐시되지 않은 데이터를 새로 고쳐야 할 때 사용하세요. 캐시된 페이지 셸과 정적 콘텐츠는 빠르게 유지되며, 알림 수, 실시간 메트릭 또는 상태 표시기와 같은 동적 데이터는 새로 고쳐집니다.React 19.2 and Canary Features
Next.js 16의 App Router는 최신 React Canary 릴리스를 사용하며, 여기에는 새로 출시된 React 19.2 기능과 점진적으로 안정화되고 있는 기타 기능이 포함됩니다. 주요 기능은 다음과 같습니다:
- View Transitions: Transition 또는 탐색 내에서 업데이트되는 요소를 애니메이션화합니다.
- useEffectEvent: Effect에서 비반응성 로직을 추출하여 재사용 가능한 Effect Event 함수로 만듭니다.
- Activity: UI를
display: none으로 숨기면서 상태를 유지하고 Effect를 정리하여 "백그라운드 활동"을 렌더링합니다.
Breaking Changes and Other Updates
Version Requirements
변경 사항 | 세부 사항 |
|---|---|
Node.js 20.9+ | 최소 버전은 이제 20.9.0 (LTS); Node.js 18은 더 이상 지원되지 않음 |
TypeScript 5+ | 최소 버전은 이제 5.1.0 |
브라우저 | Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+ |
Removals
이전에는 사용 중단되었고 이제 제거된 기능들:
제거됨 | 대체 |
|---|---|
AMP 지원 | 모든 AMP API 및 구성 제거 ( useAmp, export const config = { amp: true }) |
next lint명령어 | Biome 또는 ESLint를 직접 사용하세요; next build는 더 이상 린팅을 실행하지 않습니다. 코드모드가 제공됩니다: npx @next/codemod@canary next-lint-to-eslint-cli . |
devIndicators옵션 | appIsrStatus, buildActivity, buildActivityPosition이 구성에서 제거되었습니다. 인디케이터는 남아 있습니다. |
serverRuntimeConfig, publicRuntimeConfig | 환경 변수를 사용하세요 ( .env파일) |
experimental.turbopack위치 | 구성은 최상위 turbopack으로 이동되었습니다 (experimental에 더 이상 없음) |
experimental.dynamicIO플래그 | cacheComponents로 이름 변경됨 |
experimental.ppr플래그 | PPR 플래그 제거; Cache Components 프로그래밍 모델로 발전 중 |
export const experimental_ppr | 라우트 수준 PPR 내보내기 제거; Cache Components 프로그래밍 모델로 발전 중 |
자동 scroll-behavior: smooth | HTML 문서에 data-scroll-behavior="smooth"를 추가하여 다시 활성화 |
unstable_rootParams() | 대체 API를 작업 중이며, 곧 출시될 마이너 버전에 제공할 예정 |
동기 params, searchParams props 접근 | 비동기 사용 필수: await params, await searchParams |
동기 cookies(), headers(), draftMode()접근 | 비동기 사용 필수: await cookies(), await headers(), await draftMode() |
메타데이터 이미지 라우트 params 인수 | 비동기 params로 변경; generateImageMetadata의 id는 이제 Promise<string> |
next/image로컬 src 쿼리 문자열 | DDOS 공격을 방지하기 위해 images.localPatterns구성이 필요합니다 |
Behavior Changes
Next.js 16에서 기본 동작이 변경된 기능들:
변경된 동작 | 세부 사항 |
|---|---|
기본 번들러 | Turbopack은 이제 모든 앱의 기본 번들러입니다; next build --webpack으로 옵트아웃 |
images.minimumCacheTTL기본값 | 60초에서 4시간(14400초)으로 변경; 캐시 제어 헤더가 없는 이미지의 재검증 비용 감소 |
images.imageSizes기본값 | 기본 크기에서 16제거 (프로젝트의 4.2%만 사용); srcset 크기 및 API 변형 감소 |
images.qualities기본값 | [1..100]에서 [75]로 변경; qualityprop은 이제 images.qualities의 가장 가까운 값으로 강제 변환 |
images.dangerouslyAllowLocalIP | 새로운 보안 제한으로 로컬 IP 최적화를 기본적으로 차단; 개인 네트워크에만 true로 설정 |
images.maximumRedirects기본값 | 무제한에서 최대 3회 리디렉션으로 변경; 드문 엣지 케이스에 대해 비활성화하거나 증가시킬 수 있습니다 |
@next/eslint-plugin-next기본값 | 이제 ESLint Flat Config 형식을 기본으로 사용하여, ESLint v10과 일치하며 레거시 구성 지원을 중단할 예정 |
프리페칭 캐시 동작 | 레이아웃 중복 제거 및 점진적 프리페칭으로 완전히 재작성 |
revalidateTag()시그니처 | SWR 동작을 위한 두 번째 인수로 cacheLife프로필이 필요 |
Turbopack의 Babel 구성 | Babel 구성이 발견되면 자동으로 Babel을 활성화 (이전에는 하드 오류로 종료) |
터미널 출력 | 더 명확한 형식, 더 나은 오류 메시지 및 개선된 성능 메트릭으로 재설계 |
개발 및 빌드 출력 디렉토리 | next dev및 next build는 이제 별도의 출력 디렉토리를 사용하여 동시 실행 가능 |
잠금 파일 동작 | 동일한 프로젝트에서 여러 next dev또는 next build인스턴스를 방지하기 위한 잠금 파일 메커니즘 추가 |
병렬 라우트 default.js | 모든 병렬 라우트 슬롯은 이제 명시적인 default.js파일이 필요합니다; 그렇지 않으면 빌드가 실패합니다. 이전 동작을 위해 notFound()를 호출하거나 null을 반환하는 default.js를 생성하세요 |
모던 Sass API | 모던 Sass 구문 및 새로운 기능을 지원하는 sass-loader를 v16으로 업그레이드 |
Deprecations
Next.js 16에서 사용 중단된 기능들로, 향후 버전에서 제거될 예정입니다:
사용 중단됨 | 세부 사항 |
|---|---|
middleware.ts파일명 | 네트워크 경계 및 라우팅 초점을 명확히 하기 위해 proxy.ts로 이름 변경 |
next/legacy/image컴포넌트 | 성능 및 기능이 개선된 next/image를 사용하세요 |
images.domains구성 | 보안 제한이 개선된 images.remotePatterns구성을 사용하세요 |
revalidateTag()단일 인수 | SWR을 위해 revalidateTag(tag, profile)을 사용하거나, Actions에서 읽기-쓰기 일관성을 위해 updateTag(tag)를 사용하세요 |
Additional Improvements
- 성능 개선:
next dev및next start명령어에 대한 상당한 성능 최적화
- Node.js 네이티브 TypeScript for
next.config.ts:--experimental-next-config-strip-types플래그를 사용하여next dev,next build,next start명령어를 실행하여next.config.ts에 대한 네이티브 TypeScript를 활성화합니다.
우리는 문서에서 안정적인 릴리스 전에 더 포괄적인 마이그레이션 가이드를 공유할 예정입니다.
Feedback and Community
Next.js의 미래를 형성하는 데 도움을 주고 피드백을 공유하세요:
Contributors
Next.js는 3,000명 이상의 개별 개발자가 함께 작업한 결과입니다. 이번 릴리스는 다음에 의해 제공되었습니다:
mischnic , timneutkens , unstubbable , wyattjoh , Cy-Tek , lukesandberg , OoMNoO , ztanner , icyJoseph , huozhi , gnoff , ijjk , povilasv , dwrth , obendev , aymericzip , devjiwonchoi , SyMind , vercel-release-bot , Shireee , eps1lon , dharun36 , kachkaev , bgw , yousefdawood7 , TheAlexLichter , sokra , ericx0099 , leerob , Copilot , fireairforce , fufuShih , anvibanga , hayes , Milancen123 , martinfrancois , lubieowoce , gaojude , lachlanjc , liketiger , styfle , aaronbrown-vercel , Samii2383 , FelipeChicaiza , kevva , m1abdullahh , F7b5 , Anshuman71 , RobertFent , poteto , chloe-yan , sireesha-siri , brian-lou , joao4xz , stefanprobst , samselikoff , acdlite , gwkline , bgub , brock-statsig , @karlhorky에게 감사드립니다!
0
55
댓글
?
아직 댓글이 없습니다.
첫 번째 댓글을 작성해보세요!