[Next] 💠 Next.js 16 업데이트 정리

▷ Next.js 16 업데이트 정리

Next 16부터 Turbopack이 기본 번들러로 설정되어 있으며, 개발(dev)과 빌드(build) 환경 모두에서 Turbopack이 기본적으로 사용된다.

Next 15에서는 Turbopack이 기본값이 아니었으며, 사용자가 선택적으로 활성화해야 했다.

만약 Next 16에서 Webpack을 계속 사용하고 싶다면 --webpack 플래그를 사용하면 된다. (공식 옵트아웃 옵션)


next build --webpack

💠 React Compiler 지원

useMemo나 useCallback을 직접 사용하지 않아도 컴파일러가 알아서 최적화 해준다.


# 설치
pnpm add babel-plugin-react-compiler


/* next.config.mjs */
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

💠 Renaming Middleware to Proxy

Renaming Middleware to Proxy

Next.js는 middleware.ts를 proxy.ts로 대체하는 방향으로 업데이트되고 있으며,

아래 codemod 명령어로 파일명과 함수명을 한 번에 변경할 수 있다.


npx @next/codemod@canary middleware-to-proxy .

실행 후에는 다음과 같이 변경된다:


// middleware.ts → proxy.ts

- export function middleware() {
+ export function proxy() {
    ...
  }

💠 revalidateTag

revalidateTag

Next 16에서는 revalidateTag가 SWR 방식으로 동작하도록 변경되었다.

SWR 방식은 stale-while-revalidate 전략으로, 캐시가 만료되더라도 사용자에게는 기존(stale) 데이터를 즉시 보여주고, 백그라운드에서 새로운 데이터를 갱신(fetch)하는 방식이다. 즉, 캐시가 만료되어도 사용자는 로딩 화면 없이 최신 데이터를 확인할 수 있다.

profile 인자는 SWR 동작 방식을 세부적으로 조정하기 위한 추가 옵션이다.


revalidateTag(tag, profile)

fetch 시 태그 지정:


fetch('/api/data', { next: { tags: ['posts'] } })

재검증 호출:


// 캐시를 최대 성능 기준으로 재검증 (stale-while-revalidate 기본 전략)
// → 즉시 기존 캐시 보여주고, 백그라운드에서 최신 데이터 갱신
revalidateTag('posts', 'max')

// 1시간마다 데이터 새로고침
revalidateTag('news-feed', 'hours')

// 하루마다 데이터 새로고침
revalidateTag('analytics', 'days')

// 캐시 만료 시간을 60초로 지정 (60초 후 revalidate)
// → 60초 지나면 다음 요청 시 자동으로 최신 데이터로 갱신
revalidateTag('posts', { expire: 60 })

💠 updateTag

updateTag

Next 16에서 updateTag가 도입된 이유는, revalidateTag가 SWR(백그라운드 갱신) 방식으로 동작해 즉시 반영이 어려웠기 때문이다.

revalidateTag → 느긋한 백그라운드 업데이트용 updateTag → 즉시 캐시 무효화

updateTag는 서버 액션(Server Actions) 내에서만 사용할 수 있으며,

지정된 캐시 태그(tag)가 포함된 데이터의 캐시를 즉시 만료(expire) 시킨다.

사용자가 데이터를 변경한 직후, 그 변경 사항이 UI나 다음 요청에 바로 반영되어야 하는 경우에 사용된다.


'use server';

import { updateTag } from 'next/cache';

// 사용자가 게시글을 생성한 뒤 그 게시물 관련 캐시를 즉시 무효화
export async function createPost(formData: FormData) {
  const post = await db.post.create({ /* … */ });

  updateTag('posts');               // 'posts' 태그가 붙은 목록 캐시와
  updateTag(`post-${post.id}`);     // 'post-{id}' 태그가 붙은 개별 게시글 캐시를 즉시 만료
}

💠 refresh

refresh는 서버 액션(Server Actions) 내에서만 사용할 수 있다.

이 함수는 현재 페이지의 라우터(화면 상태)를 새로고침하는 역할을 한다.

여기서 말하는 “새로고침(refresh)”은 데이터를 다시 fetch하는 것이 아니라,

현재 보고 있는 페이지 컴포넌트를 다시 렌더링하는 것을 의미한다.

따라서 데이터 캐시는 그대로 유지된다.

단순히 화면만 다시 렌더링하고 싶다면 → refresh()

실제 데이터 캐시를 무효화(또는 갱신)하고 싶다면 → updateTag() 또는 revalidateTag()


'use server';
import { refresh } from 'next/cache';

export async function createPost(data) {
  await db.createPost(data);
  refresh(); // 클라이언트 라우터 상태를 새로고침 (캐시는 그대로)
}

💠 SVG

Next 16에서는 Turbopack이 개발·빌드 기본 번들러가 되면서,

Turbopack 설정만으로 SVG(SVGR) 처리가 가능하다.

또한 기존 experimental.turbo 옵션은 정식 명칭인 turbopack으로 변경되었다.


# 설치
pnpm add @svgr/webpack

next.config.mjs


const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

💠 Build Adapter API

Build Adapter API

[Next] 💠 Next.js 16 업데이트 정리

▷ Next.js 16 업데이트 정리

Next 16부터 Turbopack이 기본 번들러로 설정되어 있으며, 개발(dev)과 빌드(build) 환경 모두에서 Turbopack이 기본적으로 사용된다.

Next 15에서는 Turbopack이 기본값이 아니었으며, 사용자가 선택적으로 활성화해야 했다.

만약 Next 16에서 Webpack을 계속 사용하고 싶다면 --webpack 플래그를 사용하면 된다. (공식 옵트아웃 옵션)

Opting out of Turbopack


next build --webpack

💠 React Compiler 지원

useMemo나 useCallback을 직접 사용하지 않아도 컴파일러가 알아서 최적화 해준다.


# 설치
pnpm add babel-plugin-react-compiler


/* next.config.mjs */
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

💠 Renaming Middleware to Proxy

Renaming Middleware to Proxy

Next.js는 middleware.ts를 proxy.ts로 대체하는 방향으로 업데이트되고 있으며,

아래 codemod 명령어로 파일명과 함수명을 한 번에 변경할 수 있다.


npx @next/codemod@canary middleware-to-proxy .

실행 후에는 다음과 같이 변경된다:


// middleware.ts → proxy.ts

- export function middleware() {
+ export function proxy() {
    ...
  }

💠 revalidateTag

revalidateTag

Next 16에서는 revalidateTag가 SWR 방식으로 동작하도록 변경되었다.

profile 인자는 SWR 동작 방식을 세부적으로 조정하기 위한 추가 옵션이다.


revalidateTag(tag, profile)

fetch 시 태그 지정:


fetch('/api/data', { next: { tags: ['posts'] } })

재검증 호출:


// 캐시를 최대 성능 기준으로 재검증 (stale-while-revalidate 기본 전략)
// → 즉시 기존 캐시 보여주고, 백그라운드에서 최신 데이터 갱신
revalidateTag('posts', 'max')

// 1시간마다 데이터 새로고침
revalidateTag('news-feed', 'hours')

// 하루마다 데이터 새로고침
revalidateTag('analytics', 'days')

// 캐시 만료 시간을 60초로 지정 (60초 후 revalidate)
// → 60초 지나면 다음 요청 시 자동으로 최신 데이터로 갱신
revalidateTag('posts', { expire: 60 })

💠 updateTag

updateTag

Next 16에서 updateTag가 도입된 이유는, revalidateTag가 SWR(백그라운드 갱신) 방식으로 동작해 즉시 반영이 어려웠기 때문이다.

revalidateTag → 느긋한 백그라운드 업데이트용 updateTag → 즉시 캐시 무효화

updateTag는 서버 액션(Server Actions) 내에서만 사용할 수 있으며,

지정된 캐시 태그(tag)가 포함된 데이터의 캐시를 즉시 만료(expire) 시킨다.

사용자가 데이터를 변경한 직후, 그 변경 사항이 UI나 다음 요청에 바로 반영되어야 하는 경우에 사용된다.


'use server';

import { updateTag } from 'next/cache';

// 사용자가 게시글을 생성한 뒤 그 게시물 관련 캐시를 즉시 무효화
export async function createPost(formData: FormData) {
  const post = await db.post.create({ /* … */ });

  updateTag('posts');               // 'posts' 태그가 붙은 목록 캐시와
  updateTag(`post-${post.id}`);     // 'post-{id}' 태그가 붙은 개별 게시글 캐시를 즉시 만료
}

💠 refresh

refresh는 서버 액션(Server Actions) 내에서만 사용할 수 있다.

이 함수는 현재 페이지의 라우터(화면 상태)를 새로고침하는 역할을 한다.

여기서 말하는 “새로고침(refresh)”은 데이터를 다시 fetch하는 것이 아니라,

현재 보고 있는 페이지 컴포넌트를 다시 렌더링하는 것을 의미한다.

따라서 데이터 캐시는 그대로 유지된다.

단순히 화면만 다시 렌더링하고 싶다면 → refresh()

실제 데이터 캐시를 무효화(또는 갱신)하고 싶다면 → updateTag() 또는 revalidateTag()


'use server';
import { refresh } from 'next/cache';

export async function createPost(data) {
  await db.createPost(data);
  refresh(); // 클라이언트 라우터 상태를 새로고침 (캐시는 그대로)
}

💠 SVG

Next 16에서는 Turbopack이 개발·빌드 기본 번들러가 되면서,

Turbopack 설정만으로 SVG(SVGR) 처리가 가능하다.

또한 기존 experimental.turbo 옵션은 정식 명칭인 turbopack으로 변경되었다.


# 설치
pnpm add @svgr/webpack

next.config.mjs


const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

💠 Build Adapter API

Build Adapter API

Next.js

[Next] 💠 Next.js 16 업데이트 정리

▷ Next.js 16 업데이트 정리

💠 React Compiler 지원

💠 Renaming Middleware to Proxy

💠 revalidateTag

💠 updateTag

💠 refresh

💠 SVG

💠 Build Adapter API

[Next] 💠 Next.js 사용법 (v15)

[RN] 🪅 patch-package로 node_modules 커스텀하기

[RN] 📱 React Native 사용하기

[Next] 💠 Next.js 16 업데이트 정리

▷ Next.js 16 업데이트 정리

💠 React Compiler 지원

💠 Renaming Middleware to Proxy

💠 revalidateTag

💠 updateTag

💠 refresh

💠 SVG

💠 Build Adapter API