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

Install Node.js 14.19.0

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.

With npm:

1npm i -g @layer0/cli

With yarn:

Bash
1yarn global add @layer0/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:

Clone the official Next.js Commerce repository and install the dependencies.

Bash
1git clone git@github.com:vercel/commerce.git
2cd commerce
3yarn

Run 0 init in the project directory:

Bash
1cd site
20 init

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.

Deploy to Edgio.

From project root

1npm run deploy

Or from within site directory

10 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