メインコンテンツまでスキップ

Version 15

14から15へのアップグレード

Next.js バージョン15に更新するには、upgrade codemodを使用できます:

Terminal
npx @next/codemod@canary upgrade latest

手動で行いたい場合、最新の Next と React RC バージョンをインストールしてください:

Terminal
npm i next@latest react@rc react-dom@rc eslint-config-next@latest

Good to know:

  • ピア依存関係の警告が表示された場合、reactreact-dom を提案されたバージョンに更新するか、警告を無視するために --force または --legacy-peer-deps フラグを使用する必要があるかもしれません。これは、Next.js 15 と React 19 の両方が安定したら必要なくなります。
  • TypeScriptを使用している場合、Reactタイプを一時的にオーバーライドする必要があります。詳細は React 19 RC アップグレードガイドを参照してください。

React 19

  • reactreact-domの最小バージョンは19になりました。
  • useFormStateuseActionStateに置き換えられました。useFormStateフックはReact 19で引き続き使用できますが、廃止予定であり将来のリリースで削除されます。useActionStateが推奨され、pending状態を直接読み取るような追加のプロパティが含まれています。詳細はこちら
  • useFormStatusにはdatamethodactionのような追加キーが含まれます。React 19を使用していない場合、pendingキーのみが利用可能です。詳細はこちら
  • 詳細はReact 19 アップグレードガイドを参照してください。

非同期リクエストAPI(破壊的変更)

以前に同期的であったランタイム情報に依存するDynamic APIが、非同期になりました:

移行の負担を軽減するために、プロセスを自動化するためのcodemodが用意されています、APIは一時的に同期的にアクセスできます。

cookies

import { cookies } from 'next/headers'

// Before
const cookieStore = cookies()
const token = cookieStore.get('token')

// After
const cookieStore = await cookies()
const token = cookieStore.get('token')

一時的な同期使用法

app/page.tsx
import { cookies, type UnsafeUnwrappedCookies } from 'next/headers'

// Before
const cookieStore = cookies()
const token = cookieStore.get('token')

// After
const cookieStore = cookies() as unknown as UnsafeUnwrappedCookies
// 開発環境で警告が表示されます
const token = cookieStore.get('token')

headers

import { headers } from 'next/headers'

// Before
const headersList = headers()
const userAgent = headersList.get('user-agent')

// After
const headersList = await headers()
const userAgent = headersList.get('user-agent')

一時的な同期使用法

app/page.tsx
import { headers, type UnsafeUnwrappedHeaders } from 'next/headers'

// Before
const headersList = headers()
const userAgent = headersList.get('user-agent')

// After
const headersList = headers() as unknown as UnsafeUnwrappedHeaders
// 開発環境で警告が表示されます
const userAgent = headersList.get('user-agent')

draftMode

import { draftMode } from 'next/headers'

// Before
const { isEnabled } = draftMode()

// After
const { isEnabled } = await draftMode()

一時的な同期使用法

app/page.tsx
import { draftMode, type UnsafeUnwrappedDraftMode } from 'next/headers'

// Before
const { isEnabled } = draftMode()

// After
// 開発環境で警告が表示されます
const { isEnabled } = draftMode() as unknown as UnsafeUnwrappedDraftMode

params & searchParams

非同期レイアウト

app/layout.tsx
// Before
type Params = { slug: string }

export function generateMetadata({ params }: { params: Params }) {
const { slug } = params
}

export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Params
}) {
const { slug } = params
}

// After
type Params = Promise<{ slug: string }>

export async function generateMetadata({ params }: { params: Params }) {
const { slug } = await params
}

export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Params
}) {
const { slug } = await params
}

同期レイアウト

app/layout.tsx
// Before
type Params = { slug: string }

export default function Layout({
children,
params,
}: {
children: React.ReactNode
params: Params
}) {
const { slug } = params
}

// After
import { use } from 'react'

type Params = Promise<{ slug: string }>

export default function Layout(props: {
children: React.ReactNode
params: Params
}) {
const params = use(props.params)
const slug = params.slug
}

非同期ページ

app/page.tsx
// Before
type Params = { slug: string }
type SearchParams = { [key: string]: string | string[] | undefined }

export function generateMetadata({
params,
searchParams,
}: {
params: Params
searchParams: SearchParams
}) {
const { slug } = params
const { query } = searchParams
}

export default async function Page({
params,
searchParams,
}: {
params: Params
searchParams: SearchParams
}) {
const { slug } = params
const { query } = searchParams
}

// After
type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>

export async function generateMetadata(props: {
params: Params
searchParams: SearchParams
}) {
const params = await props.params
const searchParams = await props.searchParams
const slug = params.slug
const query = searchParams.query
}

export default async function Page(props: {
params: Params
searchParams: SearchParams
}) {
const params = await props.params
const searchParams = await props.searchParams
const slug = params.slug
const query = searchParams.query
}

同期ページ

'use client'

// Before
type Params = { slug: string }
type SearchParams = { [key: string]: string | string[] | undefined }

export default function Page({
params,
searchParams,
}: {
params: Params
searchParams: SearchParams
}) {
const { slug } = params
const { query } = searchParams
}

// After
import { use } from 'react'

type Params = Promise<{ slug: string }>
type SearchParams = { [key: string]: string | string[] | undefined }

export default function Page(props: {
params: Params
searchParams: SearchParams
}) {
const params = use(props.params)
const searchParams = use(props.searchParams)
const slug = params.slug
const query = searchParams.query
}
// Before
export default function Page({ params, searchParams }) {
const { slug } = params
const { query } = searchParams
}

// After
import { use } from "react"

export default function Page(props) {
const params = use(props.params)
const searchParams = use(props.searchParams)
const slug = params.slug
const query = searchParams.query
}

route handler

app/api/route.ts
// Before
type Params = { slug: string }

export async function GET(request: Request, segmentData: { params: Params }) {
const params = segmentData.params
const slug = params.slug
}

// After
type Params = Promise<{ slug: string }>

export async function GET(request: Request, segmentData: { params: Params }) {
const params = await segmentData.params
const slug = params.slug
}
app/api/route.js
// Before
export async function GET(request, segmentData) {
const params = segmentData.params
const slug = params.slug
}

// After
export async function GET(request, segmentData) {
const params = await segmentData.params
const slug = params.slug
}

runtime 設定(破壊的変更)

以前、runtime segment configは、edgeに加えてexperimental-edgeの値をサポートしていました。 両方の設定は同じものを指しており、選択肢を簡潔にするために、experimental-edgeが使用されるとエラーを出します。これを修正するには、runtime設定をedgeに更新してください。codemodが用意されていますので、自動的に行うこともできます。

fetch リクエスト

fetch リクエストはデフォルトではキャッシュされなくなりました。

特定のfetchリクエストをキャッシュに参加させるには、cache: 'force-cache'オプションを渡すことができます。

app/layout.js
export default async function RootLayout() {
const a = await fetch('https://...') // キャッシュしない
const b = await fetch('https://...', { cache: 'force-cache' }) // キャッシュする

// ...
}

レイアウトやページ内のすべてのfetchリクエストをキャッシュに参加させるには、export const fetchCache = 'default-cache' segment configオプションを使用できます。個々のfetchリクエストがcacheオプションを指定している場合は、それが使用されます。

app/layout.js
// これはroot レイアウトなので、アプリ内の独自のキャッシュオプションを設定しない
// すべてのfetchリクエストがキャッシュされます
export const fetchCache = 'default-cache'

export default async function RootLayout() {
const a = await fetch('https://...') // キャッシュする
const b = await fetch('https://...', { cache: 'no-store' }) // キャッシュしない

// ...
}

route handler

route handlerGET関数は、デフォルトではキャッシュされなくなりました。 GETメソッドをキャッシュに参加させるには、ファイル内でexport const dynamic = 'force-static'のようなルートの設定オプションを使用できます。

app/api/route.js
export const dynamic = 'force-static'

export async function GET() {}

クライアントサイドルーターのキャッシュ

<Link>またはuseRouterを介してページ間をナビゲートする際、クライアントサイドのrouter cacheからページのsegmentは再利用されなくなりました。ただし、共有レイアウトやブラウザの戻る・進む操作中には引き続き再利用されます。

ページのsegmentをキャッシュに参加させるには、staleTimesの設定オプションを使用できます:

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
}

module.exports = nextConfig

レイアウトローディング状態は依然としてナビゲーションでキャッシュされ再利用されます。

next/font

@next/fontパッケージは内蔵のnext/fontに置き換えられ削除されました。インポートを安全に自動的にリネームするためのcodemodが用意されています

app/layout.js
// Before
import { Inter } from '@next/font/google'

// After
import { Inter } from 'next/font/google'

bundlePagesRouterDependencies

experimental.bundlePagesExternalsは安定しており、bundlePagesRouterDependenciesに名前が変更されました。

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
// Before
experimental: {
bundlePagesExternals: true,
},

// After
bundlePagesRouterDependencies: true,
}

module.exports = nextConfig

serverExternalPackages

experimental.serverComponentsExternalPackagesは安定しており、serverExternalPackagesに名前が変更されました。

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
// Before
experimental: {
serverComponentsExternalPackages: ['package-name'],
},

// After
serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

Speed Insights

Next.js 15ではSpeed Insightsの自動計測が削除されました。

Speed Insightsを利用し続けるには、Vercel Speed Insights クイックスタートガイドに従ってください。

NextRequest ジオロケーション

NextRequestgeoipプロパティが削除されました。これらの値はホスティングプロバイダーによって提供されます。 codemodが用意されています、この移行を自動化するために使用できます。

Vercelを使用している場合、代わりに@vercel/functionsからgeolocationipAddressの機能を使用できます:

middleware.ts
import { geolocation } from '@vercel/functions'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
const { city } = geolocation(request)

// ...
}
middleware.ts
import { ipAddress } from '@vercel/functions'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
const ip = ipAddress(request)

// ...
}