How to convert my exisitng nextjs 14 project to nextjs 15.2

Hi there,

I believe that upgrading from Next.js 14 to 15.2 isn’t just a version bump as there are some breaking changes to be aware of.

I would recommend the following approach, make sure that you have your project in Git before proceeding with the ugrade:

1. Update Next.js:

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

   or if you use npx:

   npx @next/codemod@canary upgrade latest
   

2. Check the official Next.js 15 Upgrade Guide for any breaking changes that might affect your project.

Some APIs may have changed, and certain deprecated features might no longer work. Also, Review updates in next.config.js and other project files.

Then run your app locally with npm run dev or yarn dev and check for errors. Also, look for deprecation warnings and update your code as needed.

Since this update includes some breaking changes, going through the upgrade guide carefully will help avoid surprises.

- Bobby

Heya,

Upgrading your Next.js 14 project to Next.js 15.2 involves several steps to ensure a smooth transition and to take advantage of the latest features. Here’s a structured guide to assist you:

1. Upgrade Dependencies:

Begin by updating your project’s dependencies to the latest versions of Next.js, React, React DOM, and ESLint. This ensures compatibility with Next.js 15.2.

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

If you encounter peer dependency warnings, especially related to React 19, consider using the --force or --legacy-peer-deps flags:

npm install next@latest react@latest react-dom@latest eslint-config-next@latest --force

Note: Using these flags can bypass warnings, but it’s essential to ensure that all dependencies are compatible with React 19 to prevent potential issues.

2. Utilize the Upgrade Codemod:

Next.js provides an upgrade codemod to automate parts of the migration process. This tool refactors your codebase to align with the latest Next.js conventions.

npx @next/codemod@canary upgrade latest

Running this command will apply necessary code transformations to your project. Ensure you review the changes to understand their impact.

3. Update React Version:

Next.js 15 requires React 19. Ensure that your project is using the latest version of React:

npm install react@latest react-dom@latest

If you’re using TypeScript, also update the type definitions:

npm install --save-dev @types/react@latest @types/react-dom@latest

4. Address Breaking Changes:

Next.js 15 introduces some breaking changes, particularly with asynchronous request APIs. Functions like cookies, headers, and draftMode are now asynchronous. Update your code accordingly.

Example:

Before:

import { cookies } from 'next/headers';

const cookieStore = cookies();
const token = cookieStore.get('token');

After:

import { cookies } from 'next/headers';

const cookieStore = await cookies();
const token = cookieStore.get('token');

For a comprehensive list of breaking changes and their solutions, refer to the Next.js 15 Upgrade Guide.

5. Test Your Application:

After making the necessary updates, thoroughly test your application to ensure all functionalities work as expected. Pay close attention to areas affected by the breaking changes.

6. Update ESLint Configuration:

If you’re using ESLint, upgrade to the latest version of eslint-config-next to align with Next.js 15.2.

npm install eslint-config-next@latest

Ensure your ESLint configuration is compatible with the new version. You may need to restart your code editor or ESLint server for the changes to take effect.

Heya, @07ffbf0c7e1b47f4b26636bc7104f4

As mentioned the process hides some potential issues and I’ll recommend you to take a droplet snapshot which will be available if the process goes wrong and you can easily restore the droplet to it’s state just before the upgrade

https://docs.digitalocean.com/products/snapshots/how-to/snapshot-droplets/

Regards