Next.js + Shopify: Build a Headless Store

This guide explains how to create a high-performance, custom headless storefront using Next.js on Vercel, integrated with Shopify as the backend. We'll cover configuration, deployment, and key features like webhooks for real-time updates.

pnpm yarn

Start by cloning the Next.js Commerce template repository to get a pre-built starter.

Run the following command in your terminal:

pnpm create next-app --example https://github.com/vercel/commerce

This sets up Next.js with Shopify integration and Tailwind CSS for styling.

💡 Pro-tip: Use Vercel's automatic prompts during deployment to connect your Shopify store easily. Ensure you're not on a Shopify Starter plan, as it doesn't support custom themes.

Key Steps to Configure Shopify

Follow these steps to set up Shopify as a headless CMS.

• Create or use an existing Shopify account and storefront.
• Install the Shopify Headless theme from GitHub and publish it with your domain.
• Install the Headless app to generate a Storefront API access token.
• Customize branding for checkout, emails, order status, and favicon.
• Set up webhooks for events like product updates to enable on-demand revalidation in Next.js.

Using Shopify as a CMS

Manage content directly in Shopify admin:

• Products: Control visibility, options, and stock via tags and status.
• Collections: Use hidden collections for homepage features.
• Pages: Dynamic routes fetch and render rich content.
• Navigation: Define header and footer menus.
• SEO: Customize titles and descriptions with fallbacks.

Deploy to Vercel

After configuring Shopify, deploy your app:

1. Publish code to GitHub.
2. Import to a new Vercel project.
3. Set environment variables like SHOPIFY_STORE_DOMAIN and SHOPIFY_STOREFRONT_ACCESS_TOKEN.

💡 Pro-tip: For local webhook testing, use ngrok to tunnel requests to your development server.