Migrate your Store Launchpads to Next.js 15

Migrate your project

You can migrate your project using a codemod tool provided by Next.js, or by manually making changes.

Migrate your project using codemod

Next.js provides a codemod tool that automates the migration process. We recommend this approach for efficiency. To use the codemod tool, complete the following steps:

1. Run the codemod using the following command in your terminal:

   yarn dlx @next/codemod@canary upgrade latest

2. You are prompted to install the required package. To confirm the installation, type y.

3. The codemod detects your existing React and Next.js versions, which should be the following:

   • React version 18.3.1
   • Next.js version 14.2.9

4. You are presented with option to enable Turbopack for development mode. Select no as your project is already configured with Webpack.

5. Select the following options that the codemod presents:

   1. app-dir-runtime-config-experimental-edge for updating runtime config to edge.
   2. next-async-request-api to migrate APIs such as cookies, headers, and params to async.

   Deselect next-request-geo-ip as it is not relevant for this project.

6. When prompted to enable React 19 and its TypeScript types, select Yes. This ensures compatibility with the latest React version.

7. After the codemod completes, you may encounter warnings about peer dependency mismatches. This indicates that some libraries in your project expect older React versions. You can resolve these by updating the respective libraries to their latest versions on a library to library basis. Always check for breaking changes with the version upgrade for that library and make changes when necessary. To update dependencies, run the following Yarn command:

   yarn up @headlessui/react react-modal react-day-picker react-slick swr @testing-library/react

Check for type changes

The codemod makes adjustments to type annotations in your code. For example, it might explicitly add JSX.Element types or update TypeScript definitions for the new React 19 APIs. Review the updated type annotations, check they align with your intended functionality, and ensure no redundant types were added.

Manually migrate your project

Instead of using the Next.js codemod, you can also manually migrate your project. To do this, complete the following steps:

1. Run the following Yarn command to update your dependencies:

   yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

2. Manually update your code changes. To do this, review the Next.js 15 Release Notes and make the required changes to your codebase. For changes to async APIs, such as for cookies and headers, see Migrate request APIs.

Migrate request APIs

In Next.js version 15, dynamic APIs, such as for cookies, headers, or params, are now asynchronous. While the codemod updates your code to temporarily use these APIs synchronously, we recommend updating them to the asynchronous form.

For example, the codemod temporarily casts synchronous usage to an unsafe type. The following example shows a type before the codemod changes it:

import { cookies } from 'next/headers';

const cookieStore = cookies();
const frontasticSession = cookieStore.get('frontastic-session');

The following shows the type after the codemod changes it:

import { cookies, type UnsafeUnwrappedCookies } from 'next/headers';

const cookieStore = cookies() as unknown as UnsafeUnwrappedCookies; // Warning in dev
const frontasticSession = cookieStore.get('frontastic-session');

This form works temporarily but causes log warnings in development mode. Therefore, you need to update the code to the recommended asynchronous form, for example:

import { cookies } from 'next/headers';

const getServerOptions = async () => {
  const cookieStore = await cookies(); // Async call
  const frontasticSession = cookieStore.get('frontastic-session');

  return {
    serverOptions: {
      req: {
        cookies: { 'frontastic-session': frontasticSession?.value },
      },
    },
  };
};

Test your changes

You need to test and validate changes made by the codemod or that you made manually. To do this, complete the following steps:

1. Start your application in development mode (yarn dev) and check for any warnings or errors.
2. Ensure your tests suites reflect the changes to APIs and types.
3. Check for peer dependencies and resolve warnings about outdated libraries by upgrading to compatible versions.