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.

  • SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID
  • SHOPIFY_CUSTOMER_ACCOUNT_API_URL
  1. Go to your Shopify admin settings app (settings/apps) => Headless app/channel => Open Sales Channel => Customer Account API Manage => Application setup
  2. Copy the Customer Account API credentials and use that for the value of SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID
  3. Scroll to the Application endpoints section and copy authorization endpoint, with just the number and use that for the SHOPIFY_CUSTOMER_ACCOUNT_API_URL. For example, if your URL is https://shopify.com/<YOURNUMBER>/auth/oauth/authorize, you should use this for the ENV, https://shopify.com/<YOURNUMBER>

  • SHOPIFY_CUSTOMER_API_VERSION This is just the current version at the Shopify API Docs, GraphQL Customer Account API, currently 2024-01

  • SHOPIFY_ORIGIN_URL As mentioned above, you cannot use the Customer Accounts API on localhost or without https. So we use this Origin URL ENV to store the URL we will use in the public domain settings for the Customer Account API below. This URL is also used in the code. For your production domain, this will always be your actual production domain, for dev domains use your url's that you received from ngrok or replit. Warning: Do NOT use the ngrok or replit dev domain for production! Use your regular production domain

Include public domain, i.e. Origin URL, in Customer Account API settings​

If you do not properly list your origin domain in Shopify you will always get a mismatch error, when attempting to login with Shopify. If you get this error, please be sure you have properly set up the domain, per the instructions below.

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