🛍 Next Shopify Storefront

A headless shopify storefront built with TypeScript, Next.js, React.js, React Query, Shopify Storefront GraphQL API and Tailwind.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Type generation

npm run graphql:codegen
# or
yarn graphql:codegen

This will generate types with react-query and GraphQL Codegen as specified in the codegen.yml Check out this blog post for an intro to this stack. Curently when types are generated they are stored in src/generated/graphql.ts but with the old version of reaxt-query. To make it work simply update the import to from "@tanstack/react-query"

//.env file in project root
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=yourshopifytoken
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=yourshop.myshopify.com

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.