Skip to main content

Create a Headless Shopify Site with Next.js

Setting up a headless Shopify site with Next.js is really not too difficult. We will walk you thru the basic steps below.

I. Basic Set Up​

The basic set up for any Shopify site with Next.js can be found here: Vercel and Shopify Integration.

II. Working Locally (In Dev Mode)​

To fully test Shopify in development and use all the features, including the Customer Accounts API below and webhooks, you will need to test on a public domain with https. The Customer Accounts API will not work with localhost or without https. There are several ways you can go about this.

Shopify recommends using ngrok​

  1. Setup a ngrok account and add a permanent domain (ie. https://<your-ngrok-domain>.app).
  2. Install the ngrok CLI to use in terminal
  3. Run your app locally, npm run dev.
  4. In a separate terminal session, run ngrok http 3000.
  5. Start ngrok using ngrok http --domain=<your-ngrok-domain>.app 3000
  6. See Next.js instructions here: Testing webhooks during local development

Another option is to test with Replit​

We are huge fans of Replit, and we actually use Replit when developing Next.js websites. We have included a copy of our Replit file in our public repo in the Replit branch. When you run your website with Replit you will get a public URL (accessible via the Webview), which you can use for all the features that Shopify requires for a publicly accessible https URL. Please note that the Replit url can changes, so you will want to be sure you are using the correct one during testing.

III. Setup for using Shopify Customer Account API (Log In and /account section)​

Prerequisites​

  1. A basic Shopify Next.js website per above.
  2. Set up of a publicly accessible https testing endpoint per above, using ngrok or Replit.

Required ENV Variables​

The following ENV variables are required to properly run the Customer Accounts API with Next.js:

  • SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID
  • SHOPIFY_CUSTOMER_ACCOUNT_API_URL
  • SHOPIFY_CUSTOMER_API_VERSION
  • SHOPIFY_ORIGIN_URL

These should be included in your .env.local for development and in Vercel for production. An explanation of each is below.

  1. Setup a ngrok account and add a permanent domain (ie. https://<your-ngrok-domain>.app).
  2. Install the ngrok CLI to use in terminal
  3. Start ngrok using ngrok http --domain=<your-ngrok-domain>.app 3000

Include public domain in Customer Account API settings​

  1. Go to your Shopify admin => Hydrogen or Headless app/channel => Customer Account API => Application setup
  2. Edit Callback URI(s) to include https://<your-ngrok-domain>.app/account/authorize
  3. Edit Javascript origin(s) to include your public domain https://<your-ngrok-domain>.app or keep it blank
  4. Edit Logout URI to include your public domain https://<your-ngrok-domain>.app or keep it blank