# Migrate your Store Launchpads to Next.js 15

Follow this guide to migrate your Store Launchpad for B2B Manufacturing or your Store Launchpad for B2C Retail project to Next.js version 15.

This guide outlines the steps you need to take to migrate your project to [Next.js version 15](https://nextjs.org/docs/app/building-your-application/upgrading/version-15).

We recommend migrating your project to leverage the latest features and improvements.

## 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:

   ```bash
   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:

   ```bash
   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:

   ```bash
   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](https://nextjs.org/docs) and make the required changes to your codebase. For changes to async APIs, such as for cookies and headers, see [Migrate request APIs](/frontend-development/nextjs15-migration.md#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:

```jsx
import { cookies } from 'next/headers';

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

The following shows the type after the codemod changes it:

```jsx
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:

```js
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.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Migrate your Store Launchpad for B2C Retail to Next.js 14](/frontend-development/b2c-nextjs14-migration.md)
- [Next page: Migrate your store launchpads to Next.js 16](/frontend-development/nextjs16-migration.md)