Next.js Upgrade Guide

Compare Next.js versions and see exactly what changes, what requires action, and what you can start using.

→
4Changes
4Breaking
4Actions
0Features
0Migration tools
Analyze your project

Check your package.json

UpgradePath detects relevant tools and selects them automatically.

Local only
Analyzed locally in your browser. Nothing is uploaded.
Project setup

What does your project use?

Select the tools in your project to include relevant dependency updates in this guide.

Breaking Changes

Node.js 18.17 or newer is required

Action required
breakinghigh impact

Older Node.js runtimes are unsupported.

Migration

Update local, CI and hosting runtimes before building.

next export is removed

Action required
breakinghigh impact

Static export is configured through output.

Beforejavascript
// build: next build && next export
module.exports = {};
Afterjavascript
// build: next build
module.exports = {
  output: 'export',
};
Migration

Set output: 'export' in next.config.js and run next build. Check dynamic routes and server-only features.

@next/font is removed

Action required
breakinghigh impact

Use the built-in font module.

Beforetsx
import { Roboto } from '@next/font/google';
const font = Roboto({ weight: '400', subsets: ['latin'] });
Aftertsx
import { Roboto } from 'next/font/google';
const font = Roboto({ weight: '400', subsets: ['latin'] });
Migration

Replace @next/font imports with next/font; run npx @next/codemod@latest built-in-next-font .

ImageResponse moves to next/og

Action required
breakinghigh impact

The next/server import is replaced.

Beforetsx
import { ImageResponse } from 'next/server';
export async function GET() {
  return new ImageResponse(<div>UpgradePath</div>);
}
Aftertsx
import { ImageResponse } from 'next/og';
export async function GET() {
  return new ImageResponse(<div>UpgradePath</div>);
}
Migration

Import ImageResponse from next/og and verify generated social images.