Migrate your Store Launchpad to Next.js 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:

   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:

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:

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:

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

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

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

After:

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:

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

2. Update your cookie usage:

Before:

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

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

After:

import Cookies from 'js-cookie';

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

Update your CSS imports

Before:

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

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

After:

@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.