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
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.
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.
Open your browser to
[http://localhost:3000](http://localhost:3000) and you should see your store and your products from Shopify.