Next.js 16.3 변경사항: Instant Navigations와 에이전트 친화 프레임워크

Next.js 16.3은 마이너 릴리스지만 App Router의 캐싱 모델, 개발 도구, AI agent 지원을 함께 바꿉니다. 공식 발표 ↗는 이번 버전을 “SPA 같은 즉각적인 내비게이션, 더 빠른 dev/build, AI agent를 위한 도구”로 요약합니다.

Next.js 16.3은 App Router를 더 명시적인 캐싱 모델로 옮깁니다. Turbopack을 기본 작업 환경으로 굳힙니다. 코딩 에이전트가 프로젝트 안에서 설치된 버전의 문서를 읽고 오류를 고치게 합니다.

이 글에서 다루는 내용:

• Instant Navigations가 내비게이션 대기를 어떻게 줄이는지
• Turbopack dev/build 성능 개선이 어디에 영향을 주는지
• AI coding agent 지원이 문서 링크에서 무엇으로 바뀌었는지
• 지금 켜도 되는 기능과 실험 기능을 어떻게 나누는지

16.3은 세 영역을 바꿉니다

Next.js 16.3의 변경은 세 영역으로 나뉩니다.

flowchart TD
    A[Next.js 16.3] --> B[Instant Navigations]
    A --> C[Turbopack 성능]
    A --> D[AI agent tooling]
    B --> B1[cacheComponents]
    B --> B2[partialPrefetching]
    C --> C1[dev memory eviction]
    C --> C2[build file cache]
    D --> D1[AGENTS.md]
    D --> D2[Skills]
    D --> D3[Actionable errors]

첫 번째는 사용자 경험입니다. Instant Navigations 소개 글 ↗에 따르면 Next.js 16.3은 서버 중심 모델을 유지합니다. 대신 링크를 클릭하면 SPA처럼 shell을 즉시 보여줍니다.

두 번째는 개발자 경험입니다. Turbopack 16.3 글 ↗은 긴 next dev 세션에서 메모리를 최대 90% 줄이고, next build에서 파일 시스템 캐시를 기본으로 사용한다고 설명합니다.

세 번째는 AI agent 경험입니다. AI Improvements 글 ↗과 AI agents 공식 가이드 ↗에 따르면 Next.js는 버전별 문서를 프로젝트 안에 번들합니다. 에이전트는 AGENTS.md를 따라 설치된 버전에 맞는 문서를 읽습니다.

Vercel은 Next.js 16.3 지원 글 ↗에서 플랫폼 측정값을 따로 공개했습니다. Vercel 공식 X 영상에 따르면 16.3 앱에서 prefetch 요청은 45%, static assets는 17% 줄었습니다. path metadata serving은 2배 개선됐습니다.

Instant Navigations

Next.js 앱에서 느린 내비게이션은 오래된 불만이었습니다. Server Components는 JavaScript 전송량과 데이터 waterfall을 줄였습니다. 하지만 링크를 클릭한 뒤 서버 응답을 기다리는 동안 화면이 멈춘 것처럼 보일 수 있었습니다.

16.3은 서버 중심 모델을 유지한 채 이 대기를 줄입니다. 공식 발표의 Instant Navigations 섹션 ↗에 따르면 Server Components, Suspense, 'use cache'를 조합해 UI shell을 미리 만듭니다. 클릭하면 이 shell을 재사용해 바로 보여줍니다.

// next.config.ts
// from: https://nextjs.org/blog/next-16-3
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};

export default nextConfig;

cacheComponents 문서 ↗에 따르면 cacheComponents는 데이터 패칭을 기본적으로 dynamic으로 두고, 페이지·컴포넌트·함수 단위에서 무엇을 캐시할지 직접 선택하게 합니다. 정적 HTML shell은 즉시 서빙되고, 동적 콘텐츠는 준비되는 대로 stream됩니다.

개발 도구도 느린 내비게이션을 표시합니다. 공식 발표 ↗에 따르면 Next.js DevTools의 Instant Insights는 즉시 전환되지 않는 navigation을 표시합니다. 선택한 수정 방향은 coding agent에게 줄 prompt로 복사할 수 있습니다.

Prefetch는 route마다 shell을 한 번 가져옵니다

기존 Next.js prefetch는 viewport 안의 링크마다 요청을 만들었습니다. 채팅 앱의 사이드바처럼 같은 route pattern을 가리키는 링크가 많으면 비슷한 shell을 여러 번 가져오게 됩니다.

Instant Navigations 글 ↗에 따르면 16.3의 Partial Prefetching은 링크마다 전체 페이지를 미리 가져오지 않습니다. route마다 재사용 가능한 shell을 한 번 가져옵니다. 더 많은 내용을 즉시 보여주고 싶을 때만 <Link prefetch={true}>와 'use cache'로 per-link prefetch를 확장합니다.

대시보드, 채팅, 설정 화면처럼 내부 링크가 많은 앱에서는 네트워크 요청 수가 줄고 클릭 반응성은 유지됩니다.

ISR도 바뀌었습니다. 공식 발표 ↗에 따르면 generateStaticParams로 일부 페이지만 빌드 시점에 prerender해도, 나머지 URL의 첫 방문자에게 loading shell을 즉시 보여줍니다. 완성된 페이지는 백그라운드에서 만들어 교체합니다.

Turbopack 성능 개선

업그레이드만 해도 달라지는 부분은 Turbopack입니다. Turbopack 공식 글 ↗에 따르면 장시간 개발 세션에서 dev server 메모리가 최대 90% 줄었습니다. next build에는 persistent file system cache가 기본으로 적용됩니다.

메모리 절감은 AI agent를 함께 쓰는 환경에서 차이를 만듭니다. IDE, type checker, lint, browser automation, coding agent가 동시에 떠 있으면 dev server 하나의 메모리 사용량도 작업 안정성에 영향을 줍니다.

빌드 캐시는 .next/cache를 사용합니다. 공식 글은 CI에서 이 디렉터리를 복원해야 next build 캐시 효과를 볼 수 있다고 설명합니다.

// next.config.ts
// from: https://nextjs.org/blog/next-16-3-turbopack
const nextConfig = {
  experimental: {
    turbopackMemoryEviction: false,
  },
};

위 설정은 메모리 eviction을 끄는 예시입니다. 기본값은 auto입니다. 캐시나 개발 성능 문제를 조사할 때만 진단 옵션으로 끕니다.

Turbopack에는 import.meta.glob도 들어왔습니다. 공식 Turbopack 글 ↗에 따르면 이 API는 Vite와 호환되는 glob import입니다. 파일이 추가되거나 제거되면 dev mode에서 재컴파일합니다.

// app/blog/page.tsx
// from: https://nextjs.org/blog/next-16-3-turbopack
const posts = import.meta.glob("./posts/*.mdx", {
  eager: true,
});

Turbopack 문서 ↗에 따르면 이 기능은 Turbopack에서만 동작합니다. --webpack으로 빌드하는 Next.js 앱에서는 쓸 수 없습니다.

AI agent 지원

Next.js 16.3은 AI coding agent를 프레임워크의 공식 사용자로 다룹니다.

AI agents 공식 가이드 ↗에 따르면 Next.js 패키지는 버전이 맞는 문서를 node_modules/next/dist/docs/에 번들합니다. 16.3 이상에서는 next dev가 agent 환경을 감지했을 때 AGENTS.md와 CLAUDE.md의 managed block을 자동으로 생성하거나 갱신할 수 있습니다.

// next.config.ts
// from: https://nextjs.org/docs/app/guides/ai-agents
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  agentRules: false,
};

export default nextConfig;

자동 agent rule 생성을 원하지 않으면 agentRules: false로 끕니다. 다만 공식 가이드는 agent가 설치된 Next.js 버전에 맞는 문서를 읽을 때 결과가 더 좋았다는 benchmark도 함께 소개합니다.

Skills의 역할도 바뀌었습니다. 16.3에서는 지식 전달용 Skills의 내용이 bundled docs로 옮겨 갑니다. Skills는 next-dev-loop, next-cache-components-adoption, next-cache-components-optimizer, next-partial-prefetching-adoption처럼 실제 workflow를 수행합니다. Skills의 배경은 npx skills 글에서 정리했습니다.

에러가 수정 방향을 알려 줍니다

Instant Navigations는 개발 방식도 바꿉니다. AI Improvements 글 ↗에 따르면 cacheComponents가 켜져 있으면 서버의 await마다 Stream, Cache, Block 중 하나를 명시적으로 골라야 합니다.

예를 들어 uncached data가 route prerendering이나 instant navigation을 막으면, Next.js는 세 가지 방향을 제시합니다.

Next.js는 성능을 자동으로 최적화하지 않고, 이 선택을 개발자에게 맡깁니다. 무엇을 즉시 보여줄지, 무엇을 stream할지, 무엇을 캐시할지는 제품 요구에 따라 정합니다.

실험 기능은 플래그 뒤에 있습니다

16.3에는 안정 기능과 실험 기능이 섞여 있습니다. 공식 발표의 Experimental features 섹션 ↗은 Rust-based React Compiler와 network resilience를 실험 기능으로 따로 소개합니다.

Rust React Compiler는 Turbopack 안에서 React Compiler를 native Rust path로 실행하는 옵션입니다.

// next.config.ts
// from: https://nextjs.org/blog/next-16-3#rust-based-react-compiler
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactCompiler: true,
  experimental: {
    turbopackRustReactCompiler: true,
  },
};

export default nextConfig;

공식 발표에 따르면 v0 같은 큰 앱에서 cold build는 34%, warm build는 46% 빨라졌습니다. Babel transform이 남아 있는 프로젝트에서는 개선 폭이 줄어들 수 있습니다.

Network resilience는 experimental.useOffline 플래그와 useOffline hook으로 켭니다. 네트워크가 끊기면 soft navigation, data fetch, Server Action을 바로 실패시키지 않고 pending 상태로 둡니다. 연결이 돌아오면 다시 시도합니다.

업그레이드 체크리스트

공식 발표는 next를 최신 버전으로 올리는 명령을 안내합니다.

npm install next@latest

기존 앱은 아래 순서로 올립니다.

1. 먼저 Next.js 16.3으로 올리고 기존 테스트와 빌드를 통과시킵니다.
2. 긴 next dev 세션에서 메모리 사용량과 cold start 체감을 확인합니다.
3. CI가 .next/cache를 복원할 수 있는지 확인합니다.
4. App Router 앱이면 cacheComponents를 별도 브랜치에서 켭니다.
5. Instant Insights가 제안하는 route별 Stream, Cache, Block 결정을 하나씩 처리합니다.
6. partialPrefetching은 내부 링크가 많은 화면부터 검증합니다.
7. Playwright를 쓰고 있다면 instant() helper로 핵심 navigation regression을 잡습니다.

마무리

Next.js 16.3은 세 가지를 바꿉니다.

첫째, Instant Navigations로 Server Components 앱의 클릭 반응성을 SPA에 가깝게 만듭니다. 둘째, Turbopack의 메모리와 build cache 개선으로 큰 앱의 개발 비용을 줄입니다. 셋째, bundled docs, AGENTS.md, Skills, actionable errors로 AI agent가 Next.js 프로젝트를 고치는 표준 경로를 만듭니다.

업그레이드하면 Turbopack 성능 개선부터 확인합니다. 그다음 cacheComponents와 partialPrefetching을 route 단위로 실험합니다. 에이전트 워크플로우를 쓰는 팀이라면 AGENTS.md와 next-dev-loop 계열 Skills를 확인합니다.

관련 내부 포스트:

• npx skills: Vercel 실험에서 AI 에이전트 오픈 표준이 되기까지 — Next.js 16.3의 first-party Skills 변화와 이어지는 배경
• Vercel json-render: 생성형 UI를 JSON으로 안전하게 다루는 방법 — Vercel이 React/Next.js 생태계에서 UI 생성 방식을 실험하는 흐름
• React useEffectEvent 완벽 가이드 — React API가 암묵적 패턴을 명시적 의도로 바꾸는 흐름

참고 자료

• Next.js 16.3 공식 발표 ↗ — 릴리스 전체 요약
• Next.js 16.3: Instant Navigations ↗ — instant navigation과 partial prefetching 배경
• Next.js 16.3: AI Improvements ↗ — AGENTS.md, Skills, actionable errors
• Turbopack: What’s New in Next.js 16.3 ↗ — 메모리, build cache, Rust React Compiler, import.meta.glob
• Next.js AI agents guide ↗ — 프로젝트를 coding agent 친화적으로 설정하는 공식 가이드
• Vercel supports Next.js 16.3 ↗ — Vercel 플랫폼에서의 16.3 지원과 prefetch/static asset/path metadata 개선