# Build your Next.js Shopify storefront with Blazity

Learn to build a Shopify storefront with Next.js and the Blazity commerce starter.

## Overview

The diagram below gives an overview of the architecture of our application.

The application stack is composed of 4 key components:

- **Data sources** — Shopify admin, personalization tools, etc.
- **Search engine** — Meilisearch
- **Full-stack app** — Next.js application
- **Third-party integrations** — Analytics, CRM, etc.

In this architecture, the Meilisearch database aggregates data from multiple sources to make it accessible by the Next.js application.

Our final application will look like this: [live preview](https://commerce.blazity.com/) ✨

## Prerequisites

This guide requires:

- [Node.js](https://nodejs.org/en/download/package-manager) ≥ 20.x
- [Yarn](https://yarnpkg.com/getting-started/install) ≥ 4.x
- [Meilisearch](/content/cloud?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html) ≥ 1.8
- A [Shopify](https://www.shopify.com/) store

## Setup

This setup phase provides you with the necessary credentials for your application to interact with Meilisearch and your Shopify store.

### Creating a Shopify store

If you don’t have one already, go to [Shopify](https://www.shopify.com/) and create a new store. Shopify associates a unique ID with each store named the _store domain_.

To find your Shopify store domain, go to _Settings_ \> _Domains_. Your store domain looks like this: `your-domain.myshopify.com`.

✅ `Shopify store domain`

### Installing Shopify Headless

In the Shopify Marketplace, find the [Headless application](https://apps.shopify.com/headless) and install it. After installation, click on _Create storefront_.

Then, we will update the API access. In the _Manage API access_ section, click on _Manage_ next to _Storefront API_.

Edit the Storefront API permissions to add the following:

- `unauthenticated_read_product_inventory`
- `unauthenticated_read_customer_tags`

After saving the permissions, you can copy the **private access token**.

✅ `Shopify app Storefront API Token`

### Creating a Shopify App

Now, we will create a Shopify App for our store. Shopify Apps allow you to build custom integrations for your store. This app will allow us to get API keys to read and manage data in our Shopify store.

To create a Shopify app:

- Navigate to your store’s Shopify admin dashboard
- Open the store’s _Settings_ and navigate to the _Apps and sales channels_ tab
- Click on _Develop apps_
- If requested, follow the steps to allow custom app development for your store
- Create an app and enter a name, e.g., “Next.js App”

After creating your app, navigate to the API credentials tab to find your Shopify app’s API key (not the API secret key!)

✅ `Shopify app API key`

### Configuring the Shopify Admin API key

Shopify apps work with a set of two keys:

- An **admin API key** — to manage the Shopify admin, e.g., to edit your product catalog
- A **storefront API key** — to read the product catalog, create carts, etc.

We can configure the access scopes for these API keys in your Shopify app’s _Configuration_ tab. In this section, we will enable the required scopes for our Admin API key.

To configure the scopes for the Admin API key, follow these steps:

- In the _Admin API integration_ section, click on _Configure_
- Enable the following scopes:
  - `write_product_listings`
  - `read_product_listings`
  - `read_products`
  - `write_products`
- Under _Webhook subscriptions_, select the 2024-01 API version
- Save :)

The API version might have changed since this guide was published. We recommend checking out the [Blazity documentation](https://docs.commerce.blazity.com/).

With our tokens API scopes defined, we can return to the _API credentials_ tab and install our app. Click _Install app_ to generate your API access tokens.

After installing your Shopify app, you will have access to your Admin API access token. For security reasons, this token will only be revealed to you _once_— **make sure to save it**.

✅ `Shopify app Admin API token`

### Creating your Meilisearch database

Meilisearch is an open-source search engine that provides full-text, vector, and hybrid search capabilities. Our Shopify products data will be synced with Meilisearch, enabling the front-end app to get fast, relevant search results for end users.

If you don’t have one, create a [Meilisearch Cloud](/content/cloud?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html) account. If necessary, you can first learn how to [get started with Meilisearch Cloud](/content/docs/learn/getting_started/cloud_quick_start?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html).

Prefer self-hosting? Learn how to [install Meilisearch locally](/content/docs/learn/getting_started/installation?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html).

First, create a new _Project_, e.g., Shopify store. This will create a new Meilisearch database and should take a few seconds to complete.

Then, you can navigate to your project’s Settings page to find your _Database URL_ (your host) and _Default Admin API Key_.

✅ `Meilisearch host URL`

✅ `Meilisearch API token`

We recommend enabling [analytics & monitoring](/content/docs/learn/analytics/analytics?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html) at this step, so you don’t need to change host later.

### Configuring your Meilisearch

After creating your database, we will create the indexes. You can choose any names for them, but you’ll have to configure your environment variables accordingly. Let’s create two indexes:

- An index for our products, e.g., `products`
- An index for our product categories, e.g., `categories`

✅ `Meilisearch Products Index Name`

✅ `Meilisearch Categories Index Name`

With our indexes created, we can now configure them. Meilisearch defaults will work well for most settings. For each index, we will only configure the filterable attributes and sortable attributes.

**Product index** — Filterable attributes

```
[
	"collections",
	"collections.handle",
	"collections.id",
	"flatOptions",
	"handle",
	"minPrice",
	"tags",
	"variants.availableForSale",
	"vendor",
	"hierarchicalCategories",
	"hierarchicalCategories.lvl0",
	"hierarchicalCategories.lvl1",
	"hierarchicalCategories.lvl2",
	"avgRating"
]
```

**Product index** — Sortable attributes

```
[
	"minPrice",
	"updatedAtTimestamp",
	"avgRating"
]
```

**Categories index** — Filterable attributes

```
[
	"handle",
	"id"
]
```

You can leave all other attribute settings to their default value.

## Installation

With all credentials in hand, we’re ready to launch the installation wizard. Let’s create our project using Blazity’s `commerce` CLI.

```
# with NPM
npm create commerce

# with Yarn
yarn create commerce
```

The first prompt will ask you to select the services to enable. For this guide, we’ll only enable the defaults: Shopify and Meilisearch.

Then, the CLI will ask for a series of credentials. If you followed the Setup section, you should already have all the necessary credentials. After providing all the credentials, the CLI will scaffold your project in a new folder.

After creation, navigate to your project directory. Your `apps/web/.env.local` should look like this:

```
# apps/web/.env.local

SHOPIFY_STOREFRONT_ACCESS_TOKEN=shpat_a-very-long-token
SHOPIFY_ADMIN_ACCESS_TOKEN=shpat_another-very-long-token
SHOPIFY_STORE_DOMAIN=your-domain.myshopify.com
SHOPIFY_APP_API_SECRET_KEY=a-32-characters-long-api-key
SHOPIFY_HIERARCHICAL_NAV_HANDLE=hierarchical-categories
MEILISEARCH_PRODUCTS_INDEX=products
MEILISEARCH_CATEGORIES_INDEX=categories
MEILISEARCH_ADMIN_KEY=your-meilisearch-admin-api-key
MEILISEARCH_HOST=https://edge.meilisearch.com
LIVE_URL=https://your-domain.myshopify.com
FLAGS_SECRET=randomly-generated-secret
CRON_SECRET=another-randomly-generated-secret
```

## Syncing Meilisearch and Shopify

Blazity provides a CLI for synchronizing the data between your Shopify and Meilisearch. In this section, we will see how to achieve that using `commerce-cli`.

To sync your Shopify data with your Meilisearch, navigate to your project folder and run:

```
npx commerce-cli@latest sync
```

This command will pull all the necessary data from your Shopify store and sync it into your Meilisearch database.

Additionally, the [`commerce-cli` package](https://docs.commerce.blazity.com/features/cli) can assist you in configuring webhooks to keep your Meilisearch in sync at all times.

## Starting your app

After initializing your application and syncing the data between Shopify and Meilisearch, you are ready to start your application.

To start your application in development mode, run:

```
# with NPM
npm run dev

# with Yarn
yarn dev
```

And that’s it! You can visit your application at `http://localhost:3000` 🎉

You can also consult a live example here: [https://commerce.blazity.com/](https://commerce.blazity.com/?ref=blog.meilisearch.com)

## Going further

This guide doesn’t cover all available features in the Blazity template. For more advanced configurations, you can learn how to set up hierarchical categories, implement highly scalable redirects, and more on [Blazity documentation](https://docs.commerce.blazity.com/introduction).

Additionally, here are resources to help you integrate your new Shopify store with Meilisearch and Next.js:

- [Meilisearch documentation](/content/docs?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html)
- [Next.js documentation](https://nextjs.org/docs)
- [Integrate Meilisearch Cloud with Vercel](/content/docs/guides/integrations/vercel?utm_campaign=blazity&utm_source=blog&utm_medium=shopify-nextjs-guide/index.html)