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.

As you can see the performance of such a storefront is pretty amazing.

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
cd build-next-shop

2. Set up Shopify Partners account and create a new store