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.
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.
With npm
:
1npm i -g @layer0/cli
With yarn
:
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.
1git clone git@github.com:vercel/commerce.git2cd commerce3yarn
- Run 0
init
in the project directory:
1cd site20 init
- Duplicate
.env.template
and name it.env.local
in the project directory. Add your BigCommerce API keys to it.
1COMMERCE_PROVIDER=@vercel/commerce-bigcommerce2BIGCOMMERCE_STOREFRONT_API_URL=https://store-${STORE_HASH}-${CHANNEL_ID}.mybigcommerce.com/graphql3BIGCOMMERCE_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.com9BIGCOMMERCE_STORE_API_STORE_HASH=${STORE_HASH}
STORE_HASH
: You can retrieve it from your BigCommerce store control panel URL in the format ofhttps://store-${STORE_HASH}.mybigcommerce.com/manage/dashboard
STORE_TOKEN|STORE_CLIENT
: For instructions on generating Store API credentials, visit Obtaining Store API CredentialsSTOREFRONT_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
Connector
This framework has a connector developed for Edgio. See Connectors for more information.