4 Steps to Update the Next.js Marketplace Template
Tags: cosmic, headlesscms, nextjs
Published: 2023-09-07 17:52:00

---
title: 4 Steps to Update the Next.js Marketplace Template
published: false
description: 
tags: cosmic, headlesscms, nextjs
canonical_url: https://www.cosmicjs.com/blog/4-steps-to-update-the-nextjs-marketplace-template
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ijv6t1pdx8ek5iq3jf.png
published_at: 2023-09-07 17:52 +0000
published: true
---

We recently updated the [Next.js Marketplace template](https://www.cosmicjs.com/marketplace/templates/nextjs-marketplace) to the new [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk) and I have to say, the process was quite quick and simple. The new SDK is much lighter in bundle size (by 93%) and provides a more declarative syntax including TypeScript support, making it the recommended way to connect your JavaScript apps to Cosmic. 

The following article shows you the steps that were taken to make the upgrade and what to expect when you upgrade your projects to the new SDK.

## Getting started
To get started, install the [Next.js Marketplace template](https://www.cosmicjs.com/marketplace/templates/nextjs-marketplace) and view a [live demo here](https://cosmic-nextjs-marketplace.vercel.app/).

<video width="100%" height="350" controls autoplay muted playsinline loop>
    <source src="https://cdn.cosmicjs.com/151bc620-4cd9-11ee-82b2-d53af1858037-unft-marketplace.mp4" type="video/mp4">
  </video>

The template includes common ecommerce marketplace functionality:
1. Browse, search, and filter products for sale.
2. Purchase a product using Stripe.
3. Create your own product for sale (requires Cosmic login).

## Steps to Upgrade
The steps we took to upgrade this template are:

1. Installed the new Cosmic JavaScript SDK.
2. Updated the Bucket client configuration.
3. Added an additional parameter to fetch the products (`depth`).
4. Simplified the logic to add products.

You can see the [pull request](https://github.com/cosmicjs/unft-marketplace/pull/17/files) where each of the updates were made. Let's go over each step:

### 1. Install the Cosmic JavaScript SDK
First, we removed the deprecated Cosmic NPM module:

```
pnpm remove cosmicjs
```

Then we installed the new Cosmic JavaScript SDK:
```bash
pnpm add @cosmicjs/sdk
```
[See the PR update](https://github.com/cosmicjs/unft-marketplace/pull/17/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R12).

### 2. Bucket configuration
Next, we updated the Bucket client configuration with the following code:
```
import { createBucketClient } from '@cosmicjs/sdk'

const cosmic = createBucketClient({
  bucketSlug: process.env.NEXT_PUBLIC_COSMIC_BUCKET_SLUG,
  readKey: process.env.NEXT_PUBLIC_COSMIC_READ_KEY,
  writeKey: process.env.COSMIC_WRITE_KEY,
})
```

[See the PR update](https://github.com/cosmicjs/unft-marketplace/pull/17/files#diff-832990a65bcdac3afee4a849b66669caddb76d7b00d4a7bcab63993fc74224bcR1-R6).

### 3. Object fetching
Then we added the `depth` parameter to the part of the code that handles the product fetching. Note: This is now required when fetching nested Object relationship data.

In this example, to fetch the nested data from categories along with the product data, which is connected to the product model by a Multi-Object relationship Metafield, we set a depth of `1`.
```js
const data = await cosmic.objects
  .find({
    type: 'products',
  })
  .props('title,slug,id,metadata.categories')
  .depth(1)
```
[See the PR update](https://github.com/cosmicjs/unft-marketplace/pull/17/files#diff-832990a65bcdac3afee4a849b66669caddb76d7b00d4a7bcab63993fc74224bcR46-R52). For more information about Metafields, see [Metafields in the docs](https://www.cosmicjs.com/docs/dashboard/buckets#metafields).

### 4. Adding Objects
And lastly, we updated the way products are created as this has been dramatically simplified in the new API.  Instead of a large `metafields` array, you now have a concise `metadata` object. (Less code FTW!)

![adding-objects.png](https://imgix.cosmicjs.com/b5c665c0-4c35-11ee-82b2-d53af1858037-adding-objects.png?w=2000&auto=compression,format)

[See the PR update](https://github.com/cosmicjs/unft-marketplace/pull/17/files#diff-af9dee9bcd7097c7bbe33df5fe56e62cc0b5be5be055009462db10c2f57768f7R13-R20).

## Next steps
I hope you found this guide instructive. [Sign up](https://app.cosmicjs.com/signup) to get started using Cosmic to power content for your websites and apps.

If you are looking to migrate from the old dashboard, read the [upgrade guide](https://www.cosmicjs.com/docs/upgrade-guide) and reach out to [Cosmic support](https://www.cosmicjs.com/contact) if you need assistance.