01847c7e7b
Feat: Implement dummy data mode controlled by environment variable This commit introduces a dummy data mode for the storefront, controlled by the `NEXT_PUBLIC_USE_DUMMY_DATA` environment variable. When this variable is set to `true`, the application will use hardcoded dummy data instead of making live calls to the Shopify API. Key changes: - Added `NEXT_PUBLIC_USE_DUMMY_DATA=true` to `.env.example`. - Restored `lib/shopify/index.ts#shopifyFetch` to its original implementation that can make live API calls. - Modified all data fetching functions in `lib/shopify/index.ts` (e.g., `getMenu`, `getCart`, `getProduct`, `getProducts`, `getCollection`, `getCollectionProducts`, `getPage`, `getPages`) to check `process.env.NEXT_PUBLIC_USE_DUMMY_DATA`. If true, they now return appropriate hardcoded dummy data. Otherwise, they proceed with the original Shopify API call logic. - Modified all cart mutation functions in `lib/shopify/index.ts` (`createCart`, `addToCart`, `removeFromCart`, `updateCart`) to also respect this environment variable. In dummy mode, they log the action and return a dummy cart state, bypassing actual API calls and cookie manipulations. A shared dummy cart constant was introduced for consistency. This allows the application to be run and tested in a standalone configuration without requiring a live Shopify backend, resolving previous build errors related to API call failures in such environments.
Next.js Commerce
A high-performance, server-rendered Next.js App Router ecommerce application.
This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more.
Note: Looking for Next.js Commerce v1? View the code, demo, and release notes.
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.
- Shopify (this repository)
- BigCommerce (Demo)
- Ecwid by Lightspeed (Demo)
- Geins (Demo)
- Medusa (Demo)
- Prodigy Commerce (Demo)
- Saleor (Demo)
- Shopware (Demo)
- Swell (Demo)
- Umbraco (Demo)
- Wix (Demo)
- Fourthwall (Demo)
Note: Providers, if you are looking to use similar products for your demo, you can download these assets.
Integrations
Integrations enable upgraded or additional functionality for Next.js Commerce
-
- Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
- Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
-
- Edit pages, product details, and footer content visually using React Bricks visual headless CMS.
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
.envfile or it will expose secrets that will allow others to control your Shopify store.
- Install Vercel CLI:
npm i -g vercel - Link local instance with Vercel and GitHub accounts (creates
.verceldirectory):vercel link - Download your environment variables:
vercel env pull
pnpm install
pnpm dev
Your app should now be running on localhost:3000.
Expand if you work at Vercel and want to run locally and / or contribute
- Run
vc link. - Select the
Vercel Solutionsscope. - Connect to the existing
commerce-shopifyproject. - Run
vc env pullto get environment variables. - Run
pnpm devto ensure everything is working correctly.
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.