🎉 Introducing Edgio v6 which supports Node.js v16. Learn how to upgrade. 🎉
Edgio
Edgio

Next.js Commerce

This guide shows you how to deploy the Next.js Commerce starter kit on Edgio. Note that Next.js Commerce repo is actively under development. This repo requires an account on the BigCommerce platform. BigCommerce has a generous free trial which can be used.

Next.js Commerce Example

Here is an example of the Next.js Commerce template running on Edgio. It uses all of the latest Next.js 10 features including image optimization, localization, and incremental static regeneration with stale-while-revalidate.

Try the Next.js Commerce Example Site

View the Code

System Requirements

Sign up for Edgio

Deploying requires an account on Edgio. Sign up here for free.

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.

Bash
1npm i -g @edgio/cli

Deploy the Example

Quickly launch an example with no code by clicking the “Deploy to Edgio” button.

Deploying the official Next.js Commerce repository

If you wish to deploy to Edgio from the official Next.js Commerce repository, follow these steps:

  1. Clone the official Next.js Commerce repository and install the dependencies.
Bash
1git clone git@github.com:vercel/commerce.git
2cd commerce
3yarn
  1. Run edgio init in the project directory:
Bash
1cd site
2edgio init
  1. Duplicate .env.template and name it .env.local in the project directory. Add your BigCommerce API keys to it.

For more details on how to set up your BigCommerce store, view the BigCommerce guide

Bash
1COMMERCE_PROVIDER=@vercel/commerce-bigcommerce
2BIGCOMMERCE_STOREFRONT_API_URL=https://store-${STORE_HASH}-${CHANNEL_ID}.mybigcommerce.com/graphql
3BIGCOMMERCE_STOREFRONT_API_TOKEN=${STOREFRONT_API_TOKEN}
4BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/${STORE_HASH}
5BIGCOMMERCE_STORE_API_TOKEN=${STORE_TOKEN}
6BIGCOMMERCE_STORE_API_CLIENT_ID=${STORE_CLIENT}
7BIGCOMMERCE_CHANNEL_ID=${CHANNEL_ID}
8BIGCOMMERCE_STORE_URL=https://store-${STORE_HASH}.mybigcommerce.com
9BIGCOMMERCE_STORE_API_STORE_HASH=${STORE_HASH}
  • STORE_HASH: You can retrieve it from your BigCommerce store control panel URL in the format of https://store-${STORE_HASH}.mybigcommerce.com/manage/dashboard
  • STORE_TOKEN|STORE_CLIENT: For instructions on generating Store API credentials, visit Obtaining Store API Credentials
  • STOREFRONT_API_TOKEN: For instructions on generating the Storefront API token, visit Create a Token.
  • CHANNEL_ID: Visit Building Channels to learn how to create a channel for use in your application.
  1. Deploy to Edgio.

From project root

Bash
1npm run deploy

Or from within site directory

Bash
1edgio deploy

Learn more

For more details on using Next.js on Edgio refer to the Next.js guide.

For more details on how to set up your BigCommerce store, view the BigCommerce guide.

Connector

This framework has a connector developed for Edgio. See Connectors for more information.

View the Connector Code