Update Next.js to Latest Version

Update Next.js to Latest Version

To update the Next.js CLI and your project to the latest version, you can utilize the @next/codemod tool, which automates many of the necessary changes.

Run the Codemod

Execute the following command in your terminal to upgrade your project using the latest version of the codemod:

npx @next/codemod@canary upgrade latest

This command will guide you through the upgrade process, including updating dependencies and applying relevant codemods for breaking changes.

Manual Dependency Update (Optional)

If you prefer to manually update your dependencies or the codemod doesn't cover all necessary updates, you can use your preferred package manager to install the latest versions of Next.js, React, and related packages:

Using npm:

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

Using pnpm:

pnpm i next@latest react@latest react-dom@latest eslint-config-next@latest

If you are using TypeScript, ensure you also update @types/react and @types/react-dom to their latest versions.

Note: Next.js frequently releases new versions, and the codemod is designed to assist with these transitions. Always refer to the official Next.js documentation for specific upgrade guides related to major version changes, as they may include details on breaking changes and manual adjustments required after running the codemod.