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

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.

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

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.