vercel / commerce

Next.js Commerce

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)
• 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.

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.

Expand if you work at Vercel and want to run locally and / or contribute

1. Run vc link.
2. Select the Vercel Solutions scope.
3. Connect to the existing commerce-shopify project.
4. Run vc env pull to get environment variables.
5. 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.

commerce's Issues

Deprecating HTMLContent Component in favor of Text

[ISSUE] can't add products to cart

Description

• On my local all actions related to mybigcommerce (for example add to cart) always return Error [BigcommerceApiError]: Big Commerce API error (404), maybe im missing some configuration?

Img

Integration with Solidus

At Nebulab we are working on creating a custom open source storefront for Solidus based on Next.js and GraphQL.

After watching Next.js Conf and seeing Next.js Commerce in action, we started an internal discussion to understand if it would be feasible (and an overall sensible move) to try to integrate Solidus with this storefront instead of making one from scratch.

As per our understanding, you are planning to have out of the box integrations with different eCommerce backends. When adding a new integration, we imagine the ideal workflow to be to simply install the appropriate backend integration in this project, like the folks at BigCommerce did there, and to leave the code here untouched. In our minds, this approach would delegate the maintenance of the storefront UI to you, and allow us to solely focus on the backend integration logic.

However, after playing with this beautiful demo and having a look at the code, we are unsure on how to proceed. We would like to know your thoughts on some of our doubts and questions:

• in general, how do you envision a different backend to be integrated in the current storefront?
• bigcommerce/storefront-data-hooks is currently hardcoded throughout the codebase, how would integrating a different storefront-data-hooks look like? maybe an installer?
• what about unsupported features (for example, Solidus does not support a wishlist out of the box)? how would you handle this case?

To sum up, we would like to have a high level overview and discusson on how to approach the integration problem.

Thanks,
The Nebulab Team

Style: product title overlaps itself when line wraps

Overall, amazing work, thank you ! 🎉

In the product card, when the h3 product title wraps the lines overlap. Bug or feature, it is up to you. 😉

Add starter settings for Jest

Hey guys, I saw that this project doesn't have any unit tests. So I'd like to contribute to the unit test and I created this PR #82 in order to apply the starter settings with jest and react testing library.

Sign-up is not working

Whatever email and password given when signing-up, there's always the error message about passwords must be greater than 7 characters with at least a numeric character. It seems to me authentication is not fully implemented yet?

color swatches are not working

On click of color swatch for any product. There are no changes

Integration with Typesense for Instant Search?

Hello,

Thank you for putting this commerce starter kit together. At my previous role in an ecommerce startup, we used Next.js and we basically had to figure out most of these patterns and integrations ourselves. Something like this would have sped up our discovery and development process. So I really appreciate your work!

I currently work on an open source alternative to Algolia, called Typesense and I'd love to build an integration that showcases how to use Typesense to power site search on Next.js commerce sites. Would you be open to including this integration as part of the commerce starter kit?

The search experience would be similar to what you see here, but built with a Typesense backend.

Doc not mentioning environment variables

When trying to run this locally

Error: The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store

The needed environment variables are not mentioned anywhere in README.md. Please update.

Consider porting to JavaScript

Learning TypeScript is a large barrier to entry for a lot of developers (myself included).

This project seems like a great example of best practices for a Next.js/e-commerce site (I was planning to use it as the basis for a headless Shopify store as someone coming from Gatsby) I think it would be useful to a lot more people if it was in JavaScript rather than TypeScript.

How do I get this running?

I have been unable to get this running locally or on Vercel.
Locally, it tells me that there are a number of environment variables required from Big Commerce. So I signed up for an account and tried to create an API key. There are two different types of API keys in Big Commerce and neither of them produce the number of values or values with the same names as the ones required in this repo. So that was a dead end.

In Vercel I just get a bad gateway error after clicking attempting to "install" big commerce (in which I had to click login 3 times).

I'm really curious if anyone else has gotten this working and how you did it.

Error [BigcommerceApiError]: Big Commerce API error (401)

I am getting this error while deploying the new NextJs Commerce.
_

Error [BigcommerceApiError]: Big Commerce API error (401)

_

Missing optimistic updaters or a better UX on Mutations

For example, when we delete an item from the cart here: https://demo.vercel.store/cart

Apps gets stuck/frozen instead of optimistically delete it like a facebook button like click.

Facebook does that by optimisticUpdater: https://relay.dev/docs/en/mutations

UnhandledPromiseRejectionWarning on first deploy

When running clone+deploy, I get weird message about my Web Pages not including a locale (which I don't see any way of changing on the admin interface). And then there is an UnhandledPromiseRejectionWarning with a TypeError which causes the deploy to fail.

Enviroment variables

I am working with bigcommerce for the first time. I keep getting errors with the enviroment variables. Does anyone have a quickstart for bigcommerce or any hints on how to get this thing running?

Modules for external providers

Modules for external providers

Right now, the code base is strictly coupled with data hooks providers. We need to enable the use of different providers interchangeably.

We’re discussing steps forward with @lfades to add different data sources to Next.js Commerce and make it super easy to switch data providers and even aggregate them.

---

Goals of Commerce

• Next.js Commerce should have a completely data agnostic UI
• Aware of schema: should ship with the right data schemas and types.
• All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
• @framework will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. Note that the same applies for recipes using a CMS + an ecommerce provider.

There is a framework folder in the root folder that will contain multiple ecommerce providers.

Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.

Expected Structure

Main folder and its exposed functions

• product

  • usePrice
  • useSearch
  • getProduct
  • getAllProducts

• wishlist

  • useWishlist
  • addWishlistItem
  • removeWishlistItem

• auth

  • useLogin
  • useLogout
  • useSignup

• cart

  • useCart
  • useAddItem
  • useRemoveItem
  • useCartActions
  • useUpdateItem

• config.json

• README.md

Example of correct usage of Commece Framework

import { useUI } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'

---

Providers under development:

• Shopify
• WooCommerce
• Salesforce Commerce Cloud
• Swell
• Magento

Providers help needed:

• CommerceTools

css not working on production build

Hi there!

I took this front and hooked magento on top of the UI you provided. Everything works fine on development, as given below:

but when I made production build, it looks like that:

I also can't close cookie notice and there many others issues with UI. I didn't change anything about css at all. I only reorganized directories and deleted some stuff that wasn't necessary for me. I don't know how to show it to you guys without sharing whole project and this is unfortunately something I can't do.

I don't know what else info I can provide, as there aren't any warnings and as I said - I didn't change anything regardless css. And it works on dev mode.

Does this work with Shopify?

If so, what's the setup process? I only see BigCommerce mentioned in the documentation

Thanks! And congrats on the push!

Typo

Typo in https://nextjs.org/commerce : Instead of File-Sytem Routing it should be File-System Routing.

(By the way, unfortunately the boxes on this page are not selectable to copy&paste text.)

Bug: switching languages does not update currency locale format

Steps to reproduce:

• Go to https://demo.vercel.store/search?q=accessories
• Scroll to bottom, change English to Español
• Notice things update, but price formats remain in US locale
• Refresh the page
• Notice price formats are now shown in Spanish locale format

Expected: locale formats should update with the rest of the DOM repaint, rather than requiring a page refresh

Error "502: BAD_GATEWAY" on Nextjs vercel site

Open https://nextjs.org/commerce and click "Clone & Deploy"

Click Continue with default project name

Click Install to Connect a BigCommerce Store to your Vercel Project

Get error:

An error occurred with this application.

This is an error with the application itself, not the platform.

502: BAD_GATEWAY

Code: 

NO_RESPONSE_FROM_FUNCTION

ID: 

arn1::glhqb-1603884124738-af1b3d8f06af

If you are a visitor, contact the website owner or try again later.
If you are the owner, check the logs for the application error.

BTW. link "check the logs" returns 404 error.

Created the same bug in BigCommerce Q&A

Server Error: Image is missing required "src" property.

When first running yarn dev after build, I was seeing the following error:

Server Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":540,"height":540,"quality":"85"}

This occurred because I connected to an existing BigCommerce sandbox -- as opposed to creating a new site on creation. In this sandbox, I had a few products without any images which were causing this error. It would be great if the commerce package could account for this.

My proposal:

1. Filter out products from the Grid displays on the homepage when they do not have images.
2. Provide a placeholder/fallback image for the ProductCard.

Cheers, Leah

OWN API INSTEAD OF BIGCOMMERCE

Hi,

Can I use my own api for login and products instead of BIGCOMMERCE?

Thanks

Forgot password

Could be nice if we have a forgot password functionality too

[BUG] log in and Sign Up always return error

For Sign Up

• on local and in the deployed page when I try to make a sing up always get An unexpected error ocurred and the logs says Error: Internal server error at FetcherError.CommerceError [as constructor] but then in the mybigcommerce i can see the user created as expected

For Log In

• on local and in the deployed page always return An unexpected error ocurred. Did you forgot your password? and the logs says Error: Internal server error at FetcherError.CommerceError [as constructor]

deploy to vercel failing with missing pages : Unhandled error

Hi All, Awesome work!
I am getting an error which looks like its something unhandled, undefined etc etc.

`
Unhandled error during request: Error: Page with slug 'en-US/contact-us' not found

`

It appears that when doing an initial deploy on a new BigC store a bunch of page slugs may be failing out to request and as such failing deploy when following the 'clone & deploy' link off the https://nextjs.org/commerce page.

Socket hang up

Hi,

After I set up local env. with vercel cli and run yarn dev, it throws this error after couple of seconds.

FetchError: request to http://127.0.0.1:3000/ failed, reason: socket hang up
Uncaught at ClientRequest. (file://C:\Users\username\Desktop\nexteshop\node_modules\node-fetch\lib\index.js:1455:11)
at ClientRequest.emit (events.js:314:20)
at Socket.socketCloseListener (_http_client.js:402:11)
at Socket.emit (events.js:326:22)
at TCP. (net.js:676:12)

However, it runs fine on preview url provided by vercel cli (not sure what is that used for).

Improve documentation on local env setup

I've deployed my next.js commerce based project and cloned it.
I can see that all env values in Vercel dashboard are set and encrypted.
Then I generated my store api account in BigCommerce and I got all values except for BIGCOMMERCE_STOREFRONT_API_TOKEN (which is not the same thing as BIGCOMMERCE_STORE_API_TOKEN).

I can see in BigCommerce api docs I could generate storefront api token with postman or something but this seems a bit complicated.

Am I missing something simple? :D It feels like I am. I guess this is a call for docs improvement on local dev setup.

[BUG] - BigCommerce Cart comes back empty

[BUG] can't add any products in local env

hello @okbel thanks for all you help but im still having same issue i already create the .ev.local file whit the key get from versel, there is something else im missing? maybe local env should be different to the once generate on versel?

Originally posted by @buty619 in #29 (comment)

Clone & Deploy on Vercel failing as of today

Hi,

Building is failing when importing on Vercel (from https://nextjs.org/commerce). Also failing when cloning on my local machine and setting the BigCommerce local variables:

09:45:00	Failed to compile.
09:45:00	./hooks/index.ts:1:36
09:45:00	Type error: File '/vercel/workpath0/hooks/useCart.ts' is not a module.
09:45:00	�[0m�[31m�[1m>�[22m�[39m�[90m 1 | �[39m�[36mexport�[39m { �[36mdefault�[39m as useCart } from �[32m'./useCart'�[39m�[0m
09:45:00	�[0m �[90m | �[39m �[31m�[1m^�[22m�[39m�[0m
09:45:00	�[0m �[90m 2 | �[39m�[0m
09:45:00	error Command failed with exit code 1.
09:45:00	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
09:45:00	Error: Command "yarn run build" exited with 1
09:45:02	Done with "package.json"

I removed the "hooks" folder, re-updated the local variables and got it working...

Regards,

Réza

RFC: Custom Checkout

I'm thinking about having a fully custom checkout page for this project.

Didn't want to start working on a POC before having a talk about heuristics with the core team of the project.

There are three main topics that come to my mind right now:

1. Checkout data hooks: Based on what I've been from BigCommerce, they have a Checkout SDK to pull this off, so it shouldn't be hard to build custom hooks on top of that. But at the same time, they might be thinking about adding hooks like those to their own hooks repo, which is the kind of information I don't have access to.

2. Thinking beyond BigCommerce: I saw there's already some work being done to support multiple providers, so I'd like to know how would that affect an effort like this one.

3. Page UI: was there any mockup or version of the checkout page on the designs that were made for the initial version of the Commerce Kit?

@okbel @lfades Thoughts?

Improve lighthouse score / page speed insights scores

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdemo.vercel.store%2F&tab=mobile

The scores are not up to the mark. Is everyone seeing the same score of around 50-60? 😅

Change Clothes and Accessories link href in Navbar

Currently both Clothes and Accessories link in the Navbar searches for the matching word (clothes and accessories) in the product name, instead it should search for tags linked to the product.

[BUG] title on check out page returns to mybigcommerce Storefronts page

Description

when i'm on the checkout page from mybigcommerce if i click the title of the page they re directs me to the Storefronts page from mybigcommerce, how i can change that url so only re directs to nextjs commerce page ?

Check Out Page

Redirects page

better to keep product slug as domain.com/slug/p

It is better for SEO to create a URL in a format like above. Also, some sites will follow a pattern like, domain/slug/p/id
the slug entry may same for multiple products but id may differ.

Add loading state for /wishlist when adding a new item.

Could not find docs or tutorials.

Hi,

I am looking forward to use vercel/commerce for my clients' Shopify stores once its supported. Meantime, I would like to learn how API's and components works in this project so it will be easier to customize later on. Unfortunately, I couldn't find any docs or tutorial for that. Please share if someone knows any resources.

Thank you

Cookie Pop-Up not properly disappearing

The Accept/Reject Cookies prompt doesn't completely disappear from the page when clicked, but rather gets pushed below the bottom of the page. Generally, this would essentially make it invisible, but when scrolling against the bottom, the bounce effect of the browser reveals the prompt

Fix suggestions:

1. Add opacity fade to onclick transition (probably the better option)
2. Setting global CSS overscroll-behavior to none

I've been wanting to fix this myself, but I can't seem to find the cookie pop-up component

Accept Cookies functionality

[BUG] - Wishlist Button not working in the grid

Bug: Prompt to accept cookie use is not remembered

Confirmation of cookie use should be remembered (with a cookie presumably), but it continues to show up every time you refresh the page.

Add docs/bigcommerce.md to clarify usage.

Bug: PDP page doesn't format prices correctly

See https://demo.vercel.store/product/next-js-short-sleeve-unisex-t-shirt

The price is 13.50 USD, but it's rendered as 13.5 USD. Should be 13.50 USD.

Deployment failed

Attempting to deploy a production site results in the following error.

queryA ENOTFOUND store-...-....mybigcommerce.com at QueryReqWrap.onresolve [as oncomplete] (dns.js:203:19)

Vercel app is installed on BigCommerce and Vercel bot is connected to my Github account. Tried removing the apps and re-deploying, but hit the same issue. BigCommerce subscription is active.

Is there something else that needs to be configured?

Cannot find name `AppProps`

I have a local copy and localhost is running but inside _app.tsx there's a couple of warnings about using AppProps (Cannot find name AppProps)

[BUG] - Total of the Cart not corresponds with the number of items

In the cart section, the number of items doesn't alter the total sum of the purchase.

Awesome work guys, I can take this issue if you want 😄

env file

Which text insert into .env.local? I dunno

Color/Size Swatches should change displayed image

Bug: PDP page doesn't render prices formatted for the current locale

Similar to #44

When you switch to Spanish (bottom right) the prices should be displayed in Spanish locale format, e.g. 13,50 US. They remain unformatted.

Would probably be fixed by fixing #44.