# 1.0.0 (2024-07-20) ### Bug Fixes * adjust min and max width of the add to cart button ([9dc45aa](9dc45aad69
)) * **bigcommerce:** add limit on product variants ([#655](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/655)) ([9387178](9387178538
)) * cart error on first load ([2acc211](2acc21164b
)) * **ckibocommerce customer endpoint:** check if shopper cookie is anonymous before calling kibo api ([#613](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/613)) ([3a69dbb](3a69dbb5b0
)) * **credentials:** test credentials ([e787014](e787014103
)) * **css:** apply workaround for chrome bug ([#146](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/146)) ([b6f80b7](b6f80b7245
)) * **debug:** remove debug logs ([1c17971](1c179716b4
)) * define min input width only for the required viewports ([80b9611](80b96115b6
)) * **deploy:** try quotes ([735376c](735376cebc
)) * disabled button classes when selectedVariantId is defined are not being set ([#1333](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/1333)) ([a5de917](a5de9173e8
)) * **github actions:** setup misplaced ([a1a0e07](a1a0e0725a
)) * **github-actions:** added missing setup ([7da1ca2](7da1ca225e
)) * **github-actions:** clearly I dont know how to configure this file entirely 🫠 ([1b91fc6](1b91fc654e
)) * **github-actions:** deploy to gcp ([45ee152](45ee152d17
)) * **github-actions:** fixed extra characters ([9a979e1](9a979e128c
)) * **github-actions:** remove env from build ([3251b93](3251b9358e
)) * **github-actions:** Update develop.deploy-functions.yml ([58c989e](58c989e469
)) * **package:** added build pack script for .env ([cbac605](cbac60507b
)) * **ProductView:** fixed issue [#136](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/136) ([96f4f26](96f4f26632
)) * put issue templates inside .github folder ([#761](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/761)) ([0c5597f](0c5597fb93
)) * Remove the duplicate `description` field ([#449](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/449)) ([381cefa](381cefae0e
)) * Render item in wishlist properly if ID is a string ([#647](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/647)) ([de24bd0](de24bd041c
)) * **vendure:** add new image domain ([#698](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/698)) ([0ae927f](0ae927fbcf
)) * **yaml:** try file ([3802078](3802078f1a
)) ### Features * concise card code ([#348](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/348)) ([d71646a](d71646a60d
)) * **core:** add GBP currency code to product price type ([#717](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/717)) ([fee16e7](fee16e795c
)) * **provider:** Implement Kibo Commerce provider ([#575](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/575)) ([9a4772c](9a4772cdb4
)), closes [#1](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/1) [#5](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/5) [#3](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/3) [#4](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/4) [#6](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/6) [#9](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/9) [#8](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/8) [#6](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/6) [#9](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/9) [#11](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/11) [#16](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/16) [#13](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/13) [#14](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/14) [#12](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/12) [#17](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/17) [#19](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/19) [#20](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/20) [#22](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/22) [#24](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/24) [#21](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/21) [#23](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/23) [#26](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/26) [#25](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/25) * replace next-seo with custom solution ([#660](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/660)) ([db17055](db170558d5
)) * **test oidc:** test oidc ([2d11ecc](2d11ecca9f
)) * **vars:** update vars ([83db04f](83db04fad5
)) ### Reverts * Revert "Update variant-selector.tsx (#1115)" (#1116) ([61b134a](61b134a66c
)), closes [#1115](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/1115) [#1116](https://github.com/Revfluence/distributed-checkout-nextjs-vercel-commerce/issues/1116) * Revert "Testing potential reason" ([f46d122](f46d122b88
))
Next.js Commerce
A Next.js 14 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
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)
- Medusa (Demo)
- Saleor (Demo)
- Shopware (Demo)
- Swell (Demo)
- Umbraco (Demo)
- Wix (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
- Orama (Demo)
- 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.
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.
- Install Vercel CLI:
npm i -g vercel
- Link local instance with Vercel and GitHub accounts (creates
.vercel
directory):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 Solutions
scope. - Connect to the existing
commerce-shopify
project. - Run
vc env pull
to get environment variables. - Run
pnpm dev
to 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.
Testing an readme update