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.
Prerequisites
Setup requires:
- An Edgio account. Sign up for free.
- An Edgio property. Learn how to create a property.
- Node.js. View supported versions and installation steps.
- Edgio CLI.
Install the Edgio CLI
If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/cli@latest
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.git2cd commerce3yarn
- Run 0
init
in the project directory:
Bash
1cd site20 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-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
Bash
1npm run deploy
Or from within
site
directoryBash
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.