---
title: Building Ecommerce Sites with Next.js and Shopify
description: Learn how to integrate Next.js and Shopify together for the fastest storefronts using the Storefront GraphQL API.
url: "https://vercel.com/kb/guide/building-ecommerce-sites-with-next-js-and-shopify"
published: 2025-11-03
last_updated: 2026-10-01
authors: Vercel
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

Shopify's [Storefront API](https://shopify.dev/docs/api/storefront/latest) gives a Next.js application GraphQL access to products, collections, and carts, while Shopify keeps the commerce backend. You store your access token and shop domain as environment variables, query the API from a React Server Component, and add the same variables to your Vercel project so the storefront keeps authenticating after deployment.

Here's how to build that integration, starting with what the Storefront API expects from your requests.

## How the Shopify Storefront API works with Next.js

Next.js is the [React framework](https://vercel.com/frameworks/nextjs) for the web, used to build full-stack applications, and it powers some of the [largest ecommerce sites](https://vercel.com/customers) in the world. Shopify handles the commerce backend, including inventory, payment processing, shipping, and checkout. Neither side needs to know much about the other, because the Storefront API is GraphQL-only and framework-agnostic.

Requests go to a versioned endpoint rather than to your shop domain:

```javascript
<https://your-store.myshopify.com/api/2026-07/graphql.json>
```

Version `2026-07` is the current stable release. Shopify ships a new API version [every quarter](https://shopify.dev/docs/api/usage/versioning) and supports each stable version for at least 12 months, so pin a version in the URL and review it on that cadence. Passing the bare shop domain to `fetch` instead of the full path returns a routing error, which is a common first-request failure.

Authentication depends on which token you use. Public tokens use the `X-Shopify-Storefront-Access-Token` header and are safe to send from the browser, though a client-side request exposes the token to anyone reading the network tab. Private tokens use the `Shopify-Storefront-Private-Token` header and must stay on the server. Since the App Router renders on the server by default, a token read inside a Server Component never reaches the client bundle.

## What you need before connecting Shopify to Next.js

A Storefront API access token comes from a Shopify app with storefront data access enabled, so the app has to exist before you can generate one. Your shop domain is the `.myshopify.com` address of the store you create along the way.

Set up your Shopify account and credentials in this order:

1. Create a [Shopify Partner Account](https://accounts.shopify.com/signup). The Shopify Partner Program lets you build against Shopify through development stores.
   
2. Create a [development store](https://shopify.dev/docs/apps/build/stores/development-stores) to hold your test catalog.
   
3. Create a [Shopify app](https://shopify.dev/docs/apps/build/scaffold-app) and check **Allow this app to access your storefront data using the Storefront API**.
   
4. Generate a [Storefront API access token](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/getting-started), which authenticates every GraphQL request your application sends.
   

Add a few products to the store so your queries return data.

## How to set up a Next.js Shopify storefront

With the credentials ready, build the integration in four steps.

### 1\. Create the Next.js application

Scaffold a Next.js App Router project with TypeScript and Tailwind CSS:

```bash
npx create-next-app@latest --typescript --tailwind shopify-nextjs
cd shopify-nextjs
```

Install dependencies and start the development server with `npm install && npm run dev`. Next.js prints the local URL once the server is ready.

### 2\. Add your Shopify credentials

Store the token and domain in an `.env.local` file at the root of the project:

```javascript
SHOPIFY_STOREFRONT_ACCESS_TOKEN='your-token'
SHOPIFY_STORE_DOMAIN='your-store.myshopify.com'
```

Keep `.env.local` out of version control. Committing it exposes `SHOPIFY_STOREFRONT_ACCESS_TOKEN` and allows anyone with the file to run the storefront operations the token permits.

### 3\. Create the Storefront API fetch helper

Write a helper that builds the versioned endpoint from your domain and attaches the token header:

```tsx
type ShopifyFetchArgs = {
  query: string;
  variables?: Record<string, unknown>;
};

export async function shopifyFetch({ query, variables }: ShopifyFetchArgs) {
  const endpoint = `https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2026-07/graphql.json`;
  const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;

  if (!key) {
    throw new Error('SHOPIFY_STOREFRONT_ACCESS_TOKEN is not set');
  }

  try {
    const result = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': key
      },
      body: JSON.stringify({ query, variables })
    });

    return {
      status: result.status,
      body: await result.json()
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      error: 'Error receiving data'
    };
  }
}
```

Constructing the endpoint inside the helper means every caller sends a correctly versioned request, and throwing on a missing token surfaces a configuration problem at the first call rather than as an empty product list.

### 4\. Query products from a Server Component

Define the queries and mutations your storefront needs, then call them from an async React Server Component:

```tsx
import { shopifyFetch } from './shopify';

export async function getAllProducts(first: number) {
  return shopifyFetch({
    query: `query GetAllProducts($first: Int!) {
        products(sortKey: TITLE, first: $first) {
          edges {
            node {
              id
              title
              description
            }
          }
        }
      }`,
    variables: { first }
  });
}
```

A helper this size covers product listings and catalog reads. Stores that also handle carts and logged-in buyers need the [Cart API](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage) and its `cartCreate` mutation, plus the [Customer Account API](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/getting-started) and its OAuth 2.0 authorization flow.

Shopify's [Hydrogen developer preview](https://shopify.dev/docs/storefronts/headless/developer-preview) offers a second route to the same result. It packages Shopify's commerce primitives as a standalone library, so running `npx @shopify/hydrogen@preview setup` inside a Next.js project wires up a typed Storefront API client, cart primitives, and Shop Pay buttons instead of hand-rolled helpers. Shopify ships a Next.js starter for the preview that deploys to Vercel directly.

## How to deploy your Shopify storefront on Vercel

Deploy a Next.js Shopify storefront by pushing the project to a Git repository and importing it at [vercel.com/new](https://vercel.com/new), where framework detection applies the correct build settings for Next.js.

Add both `SHOPIFY_STOREFRONT_ACCESS_TOKEN` and `SHOPIFY_STORE_DOMAIN` on the environment variables screen during import. If the token is missing, the build still succeeds, because nothing in the build reads it. The failure surfaces on the first request instead, when the helper finds no token to send.

For the full deployment walkthrough, including webhook-driven revalidation and content modeling in Shopify, follow the [headless Shopify deployment guide](https://vercel.com/kb/guide/deploy-headless-shopify-storefront-with-vercel).

## How to build a Next.js Shopify store with v0

You can also generate the storefront instead of writing it. [v0](https://v0.app/docs/shopify) installs its Shopify integration when a prompt describes an online store, provisions a development store, creates your products and their images through the Admin API, and generates a Next.js storefront that reads the catalog through the Storefront API at runtime. Products live in Shopify rather than in your code, so the catalog stays the source of truth as the app changes.

Development stores can't take real orders. When you publish an app connected to an unclaimed store, v0 adds a **Commerce mode** step to the publish flow where you select **Claim Store**, complete the claim on Shopify, and choose a plan.

To wire an existing store into a Vercel project, install the [Shopify integration](https://vercel.com/marketplace/shopify) from the Vercel Marketplace, which configures your Shopify credentials for you. You can also install it from the [Vercel CLI](https://vercel.com/docs/cli/integration):

```bash
vc i shopify
```

If you'd rather start from a working codebase, the [Shopify Online Store template](https://vercel.com/templates/next.js/shopify-online-store-with-next-js) is a reference storefront built with Next.js 16, React 19, Tailwind CSS 4, and the Shopify Storefront API. Scaffold it with one command:

```bash
npx create-vercel-shop@latest my-store
```

The generated project ships with typed Storefront API operations, cart handling through server actions, and Customer Account API authentication already wired up.

## How to fix common Next.js and Shopify integration errors

Four errors account for most broken Shopify integrations, and each one has a distinct symptom.

Work through them in order:

- **Routing errors on every request:** The endpoint is incomplete. Confirm the URL includes the `/api/{version}/graphql.json` path and not only the shop domain.
  
- **Authentication errors after deployment:** The access token is missing or wrong in the deployment environment. Add it under **Settings** **\>** **Environment Variables** in your Vercel project, then redeploy. Environment variable changes only apply to new deployments, so the existing one keeps failing until you rebuild.
  
- **Stale data on product pages:** Cached pages aren't being invalidated. Configure a Shopify `products/update` [webhook](https://shopify.dev/docs/api/admin-graphql/latest/enums/WebhookSubscriptionTopic) that calls a Next.js Route Handler running [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag).
  
- **Query failures after a version change:** The pinned API version reached the end of its support window. Check the version in your endpoint against Shopify's release schedule and migrate the affected queries.
  

Each of these fails loudly in your [runtime logs](https://vercel.com/docs/logs/runtime), so start there when a storefront returns empty data.

## Next steps

With your storefront running locally, head to [vercel.com/new](https://vercel.com/new) to import the project and deploy it, or start from the [Shopify Online Store template](https://vercel.com/templates/next.js/shopify-online-store-with-next-js) if you want a reference storefront to build on.

## Read more

Use these resources to go deeper on deployment, generated storefronts, and Shopify tooling on Vercel:

- [Deploy a headless Shopify storefront with Vercel](https://vercel.com/kb/guide/deploy-headless-shopify-storefront-with-vercel)
  
- [Vercel Shop documentation](https://docs.vercel.shop/docs/getting-started)
  
- [Shopify in v0](https://v0.app/docs/shopify)
  
- [Next.js on Vercel](https://vercel.com/docs/frameworks/full-stack/nextjs)
  
- [Commerce and payments integrations](https://vercel.com/docs/integrations/ecommerce)
  
- [Build and deploy Shopify storefronts on Vercel](https://vercel.com/changelog/build-and-deploy-shopify-storefronts-on-vercel)
  

## Frequently asked questions

### What Shopify API endpoint should a Next.js storefront use?

Use the full versioned GraphQL endpoint, `https://your-store.myshopify.com/api/2026-07/graphql.json`, with the version as part of the path rather than a query parameter or header. Responses carry an `X-Shopify-API-Version` header, and a value that differs from the one you requested means the version is inaccessible and Shopify fell forward to its default.

### Can I use a Shopify Storefront API token in the browser?

Yes, if it's a public token. Public tokens are built for browser requests, though anyone can read one out of the network tab. Private tokens are server-only, and a Next.js storefront that fetches during server rendering rarely needs a browser-side token anyway.

### Do I need Hydrogen to build a Shopify storefront with Next.js?

No. The Storefront API is framework-agnostic, so a fetch helper and GraphQL queries are enough. The developer preview is additive rather than a migration, since its setup command installs into an existing Next.js project, which makes it a decision you can defer until hand-rolled helpers start costing you time.

### How do I keep product pages fresh after a Shopify update?

Tag your Shopify fetches, then invalidate the tag when the catalog changes. Untagged responses can't be revalidated this way, so the tagging is the part worth getting right first. Invalidating a tag clears the cached entry, and the page regenerates on the next request rather than at webhook time.

## More Next.js guides

- [How do I reduce my build time with Next.js on Vercel?](/kb/guide/how-do-i-reduce-my-build-time-with-next-js-on-vercel): Reduce Next.js build times on Vercel by pre-rendering fewer pages at build time, deferring generation with ISR and image optimization, and using faster build machines.
- [Integrating AWS Secrets Manager with Vercel Using Terraform](/kb/guide/integrating_aws_secrets_manager_with_vercel_using_terraform): Learn how to seamlessly integrate AWS Secrets Manager with Vercel for enhanced security and efficiency in your web deployments using Terraform with our comprehensive guide.
- [Can I redirect from a subdomain to a subpath?](/kb/guide/can-i-redirect-from-a-subdomain-to-a-subpath): Learn how to redirect from your subdomain to a subpath on Vercel with a vercel.json file or with Next.js