Building Ecommerce Sites with Next.js and Shopify

Shopify's Storefront API 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.

Copy link to headingHow the Shopify Storefront API works with Next.js

Next.js is the React framework for the web, used to build full-stack applications, and it powers some of the largest ecommerce sites 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:

<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 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.

Copy link to headingWhat 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. The Shopify Partner Program lets you build against Shopify through development stores.
2. Create a development store to hold your test catalog.
3. Create a Shopify app and check Allow this app to access your storefront data using the Storefront API.
4. Generate a Storefront API access token, which authenticates every GraphQL request your application sends.

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

Copy link to headingHow to set up a Next.js Shopify storefront

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

Copy link to heading1. Create the Next.js application

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

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.

Copy link to heading2. Add your Shopify credentials

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

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.

Copy link to heading3. Create the Storefront API fetch helper

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

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.

Copy link to heading4. Query products from a Server Component

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

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 and its cartCreate mutation, plus the Customer Account API and its OAuth 2.0 authorization flow.

Shopify's Hydrogen 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.

Copy link to headingHow 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, 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.

Copy link to headingHow to build a Next.js Shopify store with v0

You can also generate the storefront instead of writing it. v0 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 from the Vercel Marketplace, which configures your Shopify credentials for you. You can also install it from the Vercel CLI:

vc i shopify

If you'd rather start from a working codebase, the Shopify Online Store template is a reference storefront built with Next.js 16, React 19, Tailwind CSS 4, and the Shopify Storefront API. Scaffold it with one command:

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.

Copy link to headingHow 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 that calls a Next.js Route Handler running 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, so start there when a storefront returns empty data.

Copy link to headingNext steps

With your storefront running locally, head to vercel.com/new to import the project and deploy it, or start from the Shopify Online Store template if you want a reference storefront to build on.

Copy link to headingRead more

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

• Deploy a headless Shopify storefront with Vercel
• Vercel Shop documentation
• Shopify in v0
• Next.js on Vercel
• Commerce and payments integrations
• Build and deploy Shopify storefronts on Vercel