Build a Shopify Store with Next.js + Tailwind CSS: Modern eCommerce
Article brought to you by buildnextshop.com
In this quick tutorial I will be showing you the basics of setting up a headless eCommerce store using Shopify Storefront API (GraphQL) with Next.js as the frontend framework and Tailwind CSS for styling.
Next.js allows us to create blazing fast stores using static site generation, which is a perfect fit for e-commerce. The combination of the three technologies allows us to quickly get production level experiences.
Here is the sample starter project that contains a lot more information: https://github.com/iskurbanov/shopify-next.js-tailwind
Let’s get started:
1. Setup Next.js Project with Tailwind CSS
There are many ways to set up a Next.js project but for our project this one is the fastest.
npx create-next-app -e with-tailwindcss build-next-shop
2. Set up Shopify Partners account and create a new store
Navigate to Shopify Partners and create your Shopify Partners account (if you don’t have one already).
Then, navigate to the Stores tab on the left-hand side and create a new store.
Among other benefits, a Partners account will allow you to easily manage stores and have unlimited time to work on them before transferring to a client.
3. Connect Shopify store to Next.js app
Navigate to the Apps tab in your store and hit the “Manage private apps” link at the bottom:
Accept the terms and conditions, name your private app “Next.js Connection” and enter your email address. Then scroll down and check “Allow this app to access your storefront data using using the Storefront API”.