Fiddle
Forum
Status
Support

Next.js Commerce

This guide shows you how to deploy the Next.js Commerce starter kit on Layer0. 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 Layer0. 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
Deploy to Layer0

Sign up for Layer0

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

Install the Layer0 CLI

If you have not already done so, install the Layer0 CLI

Terminal
npm i -g @layer0/cli
# or
yarn global add @layer0/cli

System Requirements

Deploy the Example

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

Deploy to Layer0

Deploying the official Next.js Commerce repository

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

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


    Terminal
    git clone git@github.com:vercel/commerce.git
cd commerce
yarn

  2. Run Layer0 init in the project directory:


    Terminal
    cd site
0 init

  3. 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

    Terminal
    COMMERCE_PROVIDER=@vercel/commerce-bigcommerce
BIGCOMMERCE_STOREFRONT_API_URL=https://store-${STORE_HASH}-${CHANNEL_ID}.mybigcommerce.com/graphql
BIGCOMMERCE_STOREFRONT_API_TOKEN=${STOREFRONT_API_TOKEN}
BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/${STORE_HASH}
BIGCOMMERCE_STORE_API_TOKEN=${STORE_TOKEN}
BIGCOMMERCE_STORE_API_CLIENT_ID=${STORE_CLIENT}
BIGCOMMERCE_CHANNEL_ID=${CHANNEL_ID}
BIGCOMMERCE_STORE_URL=https://store-${STORE_HASH}.mybigcommerce.com
BIGCOMMERCE_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.

  4. Deploy to Layer0.

    From project root


    Terminal
    npm run deploy

    Or from within site directory


    Terminal
    0 deploy

Learn more

ℹ️
For more details on using Next.js on Layer0 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 Layer0. See Connectors for more information.

View the Connector Code