> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/developer-tools/next-js/guides/react-sdk-migration-guide.md).

# React SDK Migration Guide

### Overview

Chord’s [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy/) used to include React hooks like `useCart` and `useAnalytics` in the `src/hooks/actions` directory. The release of Chord’s new [React](/chord-oms/developer-tools/react.md), `react-autonomy`, allows these hooks to be imported from the `react-autonomy` package instead. The [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy/) has been updated to use this new SDK. If you developed a website based on a previous version of the Next.js starter, you may want to update your website code to use `react-autonomy`.

**Why update?**

Going forward, all SDK features and fixes will be made to `react-autonomy`. `react-autonomy` also comes with some great new features!

### Major Changes

**Typescript support**

`react-autonomy` has complete Typescript support with type definitions.

**Removed dependency on CMS product catalog**

Previously, all products in the CMS had to belong to a single catalog. A `bootstrapReduxStore` query fetched the catalog from the CMS on every page, and Redux stored the catalog and used it to add product metadata, like descriptions and images, to product-related Segment tracking events. `react-autonomy` removes this dependency on a product catalog and instead adds an optional `product` argument to some SDK methods, allowing you to provide the product from the CMS and control the CMS query.

**JSDoc documentation**

`react-autonomy` includes function documentation following the [JSDoc](https://jsdoc.app/) specification.

**Improved hooks and methods**

Names, parameters, and behavior has been standardized across the SDK.

### Migration Steps

Upgrading a Next.js site to use `react-autonomy` requires making the following broad changes. You can reference the [starter diff](https://github.com/chordcommerce/nextjs-starter-autonomy/commit/64703e37bf8e2dbba8ab230a59fbcb4c0adb7be2#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) to see the complete list of changes when we migrated the starter.

### Update dependencies

Remove these packages (they’re now dependencies of `react-autonomy`):

{% code title="yarn" %}

```shell
yarn remove @chordcommerce/chord-js-autonomy next-redux-wrapper redux-devtools-extension redux-thunk
```

{% endcode %}

Add these packages:

{% code title="yarn" %}

```shell
yarn add @chordcommerce/react-autonomy @chordcommerce/chord-magic
```

{% endcode %}

### Update queries

Delete the `bootstrapReduxStore` query, because it’s no longer used.

Delete any queries referencing `bootstrapReduxStore`. For example, the article query at `packages/nextjs-starter-autonomy/graphql-cms/queries/article.js` used to export both a `getArticle` function and a `getArticleWithReduxState` function. The `getArticleWithReduxState` function should be deleted.

Delete references to `get*WithReduxState` queries in page templates. References to `reduxWrapper` should be replaced with a new utility, `nextContentWrapper`, that we’ve included in the Next.js starter to facilitate fetching the same content on every page (for example, notification banner content).

Here’s an example of how we’ve converted `nextjs-starter-autonomy/pages/articles/[slug].js`:

```javascript
import Metadata from '~/components/Metadata'
import ArticlePage from '~/components/Article/Page'
- import {
-   getArticles,
-   getArticleWithReduxState
- } from '../../graphql-cms/queries'
- import { wrapper as reduxWrapper } from '~/redux/store'
+ import { getArticles, getArticle } from 'graphql-cms/queries'
+ import nextContentWrapper from 'graphql-cms/nextContentWrapper'

export async function getStaticPaths() {
  const articles = await getArticles()
  const paths = articles.map(a => `/articles/${a.slug}`) || []
  return {
    paths,
    fallback: false
  }
}

- export const getStaticProps = reduxWrapper.getStaticProps(store =>
+ export const getStaticProps = nextContentWrapper.getStaticProps(
  async ({ params }) => {
    const { slug } = params
    return {
      props: {
-         article: await getArticleWithReduxState({ slug }, store)
+         article: await getArticle({ slug })
      }
    }
  }
```

### Add `<ChordProvider>`

Add the `ChordProvider` component, and wrap the application with it in `_app.js`.

### Delete deprecated files

`react-autonomy` includes React hooks and state management, so a lot of files previously included in the Next.js starter can be deleted. Delete these directories:

* `src/redux`
* `src/services`
* `src/hooks/actions` (except for `src/hooks/actions/use-translate.js`)

### Update React components

Hooks should be imported from `@chordcommerce/react-autonomy` instead of `~/hooks/actions`:

```javascript
- import { useCart } from '~/hooks/actions'
+ import { useCart } from '@chordcommerce/react-autonomy'
```

Hooks and method names have changed, so this will need to be updated throughout your code. Reference the documentation to see how they’ve changed. For example:

```javascript
- onClick={() => trackClickProduct(slug)}
+ onClick={() => trackProductClicked({ product: serializedProduct })}
```

### Add product serializer

As mentioned above, some methods now have a `product` argument you can include to add details about the product to the Segment tracking event. [`nextjs-starter-autonomy/src/utils/chord/serialize.js`](https://github.com/chordcommerce/nextjs-starter-autonomy/blob/main/src/utils/chord/serialize.js) provides a couple of convenience methods that serialize the Chord CMS [Content Models](/chord-oms/content-management-cms/content-models.md) into the correct object shape. You can customize these functions as needed, or write your own.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/developer-tools/next-js/guides/react-sdk-migration-guide.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.