Creating the Next.js App

Now that our Shopify store is all setup and configured we will need to create the Next.js front-end for it. Fortunately, the amazing team at Vercel has already provided us with a project which we can use for our store.

We will be using the Next.js Commerce application, which you can find more about here.

Cloning & Installing the App

First, you will need to fork the Next.js Commerce Repo.

Once you have forked their repo, you will need to clone it down locally to your machine.

git clone [email protected]:<YOUR GITHUB USERNAME>/commerce.git

Screen Shot 2022-01-03 at 12.24.44 PM.png

Then cd into the repo and install all of the NPM dependencies with yarn.

cd commerce
yarn install

Next, we will need to change providers in the app to Shopify. We can follow along with the directions in the README of the repo under the “How to change providers” section.

Create a file called .env.local inside of the site/ directory. Open site/.env.local and update it to look like the following.

info

You will need your Shopify Storefront API key and the domain of your store.

# site/.env.local

COMMERCE_PROVIDER=@vercel/commerce-shopify
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=7313c9dc3c0344ddfcde896e3d03a405
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=nextjs-ecommerce-demo-2.myshopify.com/

Next, within your terminal start up the development server.

yarn dev

Open your browser to [http://localhost:3000](http://localhost:3000) and you should see your store and your products from Shopify.

Screen Shot 2022-05-09 at 10.53.36 AM.png