Documentation

Migrate your Store Launchpad for B2B Manufacturing to Next.js 14

Follow this guide to migrate your Store Launchpad for B2B Manufacturing project to Next.js version 14.

This guide outlines the changes to the Store Launchpad for B2B Manufacturing and the steps required to migrate your project to Next.js version 14, including support for React Server Components and the App Router.

Migrating your project is not mandatory, but it is recommended to leverage the latest features and improvements.

We recommend you also refer to the Next.js App Router migration guide alongside this guide.

Overview of changes

Following is an overview of changes to the code for the Store Launchpad for B2B Manufacturing to facilitate the migration to Next.js version 14. For steps to migrate your current B2B launchpad project, see Migration steps.

Upgraded tooling

This update introduces the following framework and tooling upgrades:

  • Next.js is upgraded to version 14.2.9
  • React is upgraded to version 18.3.1
  • Yarn is upgraded to version 4.4.1
  • TypeScript is upgraded to version 5.5.4

Introduced size- class system for UI styling

We introduced a standardized size- class system to achieve a more consistent design across the store launchpad. This replaces specific width and height values for the following components:

  • src/components/atoms/button/
  • src/components/atoms/checkbox/
  • src/components/atoms/toggle/

Updated Storybook documentation

A new Storybook introduction page was added for the Store Launchpad for B2B Manufacturing at the following location: src/docs/storybook/. This page provides an overview of how to extend and customize components in the new launchpad version.

Refactored components

The following key components were refactored for performance improvements and to align with Next.js best practices:

  • Cart components: src/components/organisms/cart/CartForm.tsx
  • Customer details: src/components/pages/customer/CustomerDetails.tsx

Enhanced testing suite

Unit tests at src/tests/ were updated to accommodate the changes in Approval Rules and the logout button rendering logic, ensuring more robust test coverage.

Fixed bugs

Logout button

We updated the logout button rendering conditions to ensure the button is visible only when appropriate, optimizing user session management. The change affects src/components/organisms/header/LogoutButton.tsx.

Toaster notifications

We updated toaster notifications so they render correctly when empty, which ensures the correct display of notifications. The change affects the following components:

  • src/components/atoms/toaster/Toaster.tsx
  • src/components/atoms/toaster/helpers/getToast.tsx

Migration steps

Before completing the migration, we recommend that you do the following:

  • Back up any customized components and reapply them as necessary after upgrading.
  • Ensure that your tsconfig.json is compatible with the latest TypeScript version.

To incorporate the preceding changes, follow these steps to migrate your launchpad project:

  1. Upgrade the core dependencies to the following:

    • Next.js to version 14.2.9
    • React to version 18.3.1
    • Yarn to version 4.4.1
    • TypeScript to version 5.5.4

  2. Test the logout button to ensure the it is rendered correctly based on the new logic for user sessions at src/components/organisms/header/LogoutButton.tsx.

  3. Update UI components, such as buttons, checkboxes, and toggles to use the new size- class system for consistent styling.

  4. Test toaster notifications to ensure they are displayed correctly without rendering empty boxes.

  5. Read the new Storybook introduction at src/docs/storybook/ for guidance on component customization.

  6. Review any customizations in CartForm.tsx and CustomerDetails.tsx to ensure compatibility with the new changes.

  7. Update your unit tests to reflect the new functionality.

  8. After upgrading, ensure you thoroughly test approval workflows, UI consistency, and notifications.