gibify / gibify-commerce

An E-commerce website using next.js, vercel and shopify.

A Next.js 13 and App Router-ready ecommerce template featuring:

• Next.js App Router
• Optimized for SEO using Next.js's Metadata
• React Server Components (RSCs) and Suspense
• Server Actions for mutations
• Edge Runtime
• New fetching and caching paradigms
• Dynamic OG images
• Styling with Tailwind CSS
• Checkout and payments with Shopify
• Automatic light/dark mode based on system settings

Providers

Vercel will only be actively maintaining a Shopify version as outlined in our vision and strategy for Next.js Commerce.

Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the lib/shopify file with their own implementation while leaving the rest of the template mostly unchanged.

Running locally

You will need to use the environment variables defined in .env.example to run Next.js Commerce. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control your Shopify store.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
3. Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Vercel, Next.js Commerce, and Shopify Integration Guide

You can use this comprehensive integration guide with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.