# Migrate your Store Launchpad to Next.js 16

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

This guide outlines the steps you need to take to migrate your store launchpad project to Next.js version 16 with React 19.

Migrating your project is not mandatory, but we recommend it so you can leverage the latest features and improvements, including the new Turbopack bundler.

You can migrate your project manually, or by using a codemod tool provided by Next.js. After you migrate your project, you must update your dependencies, CSS imports, and test your changes to ensure everything works as expected.

## Migrate your project using the Next.js codemod tool

Next.js provides a codemod tool that automates the migration process. For efficiency, we recommend using this method. To use the codemod tool:

1. Run the following command in your terminal:

   ```bash
   yarn dlx @next/codemod@canary upgrade latest
   ```

2. When prompted, type `y` to install the required package. The codemod detects your existing React and Next.js versions, which should be the following:

   - React version 18.3.1 or later
   - Next.js version 15.2.0 or later

3. When asked about enabling Turbopack for development mode, select `Yes`. Next.js 16 uses Turbopack as the default bundler.

4. Select the following options that the codemod presents if applicable to your project:

   - For updating runtime config to edge: `app-dir-runtime-config-experimental-edge`.
   - For ensuring async API migrations are complete: `next-async-request-api`.
   - Deselect `next-request-geo-ip` as it is not relevant for this project.

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

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 for each library and update your code when necessary. For example, to update common dependencies, run the following Yarn command:

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

### Update your dependencies

After the codemod completes, update the following dependencies that require specific versions for React 19 compatibility:

```bash
yarn add react-icons@^5.4.0
yarn add next-intl@^4.0.0
```

## Migrate your project manually

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 16 Release Notes](https://nextjs.org/blog/next-16) and make the required changes to your codebase.

### Update next-intl usage

If your project uses next-intl, version 4 introduces async APIs. Update your code as follows:

Before:

```javascript
import { getTranslations } from 'next-intl/server';

export function generateMetadata() {
  const t = getTranslations('Metadata');
  return { title: t('title') };
}
```

After:

```javascript
import { getTranslations } from 'next-intl/server';

export async function generateMetadata() {
  const t = await getTranslations('Metadata');
  return { title: t('title') };
}
```

### Replace next-client-cookies with js-cookie

Next.js 16 is not compatible with the next-client-cookies package. Replace it with js-cookie by doing the following:

1. Add js-cookie to your project and remove next-client-cookies:

   ```bash
   yarn remove next-client-cookies
   yarn add js-cookie
   yarn add -D @types/js-cookie
   ```

2. Update your cookie usage:

Before:

```javascript
import { useCookies } from 'next-client-cookies';

const cookies = useCookies();
const value = cookies.get('my-cookie');
```

After:

```javascript
import Cookies from 'js-cookie';

const value = Cookies.get('my-cookie');
```

## Update your CSS imports

Turbopack requires all `@import` statements to appear before other CSS rules. Update your main CSS file as follows:

Before:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('./components/slider.css');
```

After:

```css
@import url('./components/slider.css');

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 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 using `yarn dev` and check for any warnings or errors.
2. Ensure your test 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 launchpads to Next.js 15](/frontend-development/nextjs15-migration.md)
- [Next page: Migrate your store launchpads to Node.js 24](/frontend-development/node-launchpad-migrations.md)
- [Search documentation and API specs](/search.md)