🛍 Next.js Shopify Storefront

A modern Shopping Cart built with ESMate, Next.js, React.js, ShadCN, ESLint, Prettier, GraphQL, and Shopify Hydrogen.

Why?

Building an online store usually means wrestling with complicated code for days? I wanted to change that.

So I created Next.js Shopify Storefront—basically, it's a starter kit that lets you build a Shopify store incredibly fast. Think of it as a foundation that's already solid, so you can focus on what makes your store unique instead of reinventing the wheel.

Here's what I'm talking about: it uses Next.js and React.js for the framework, TailwindCSS and ShadCN to make things look great, and connects directly to Shopify's backend through their GraphQL API. The shopping cart? Built with Shopify Hydrogen React.

But the part I'm most proud of is the developer experience. Everything's configured—ESMate, ESLint, Prettier, GraphQL Codegen—so the code stays clean and safe automatically.

It's not revolutionary. It's just taking what works and packaging it so you can skip the tedious setup and start building something meaningful.

If you like this project, hit the STAR button to bookmark it ⭐️

Demonstration

You can visit here to see the demo: https://next-shopify-storefront.vercel.app/

Installation

Clone the source code into your computer.

git clone https://github.com/VienDinhCom/next-shopify-storefront.git

This project was developed with Node 24 and PNPM 10.

Install the project's dependencies.

pnpm install

Usage

First, you need to set the below environment variables in the .env file or your deployment platforms.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

You can follow the Shopify Storefront GraphQL API documentation to get Storefront API information.

Develop

Develop the project in development mode.

pnpm run dev

Build

Build the project in production mode.

pnpm run build

Start

Start the project in production mode.

pnpm run start

Lint & Format

Analyze the code to find problems with eslint and prettier.

pnpm run check

Automatically fix problems.

pnpm run fix

Visual Studio Code Extensions

To speed up your productivity, you can install these extensions:

• Eslint
• Prettier
• TailwindCSS

Related Projects

• Shopify Data Faker • A Shopify development tool for generating dummy store data.
• Bootstrap Shopify Theme • A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
• Next Shopify Storefront (v3) • A Shopping Cart built with TailwindCSS, HeadlessUI, Next.js, React.js, Shopify Hydrogen,... and Shopify Storefront GraphQL API.
• Next Shopify Storefront (v2) • A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.
• Next Shopify Storefront (v1) • A Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.