Next.js Commerce

This guide shows you how to deploy the Next.js Commerce starter kit on Layer0. Note that Next.js Commerce is currently under development and requires an account on the BigCommerce platform.

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.

Connector

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

Getting Started

The easiest way to try Next.js Commerce on Layer0 is to clone and deploy the version from the Layer0 examples:

Register for a free account on the Layer0 sign up page.
Clone the Layer0 examples repository:

git clone git@github.com:layer0-docs/layer0-examples.git

Navigate to the nextjs-commerce example directory and install the required modules via yarn:

cd layer0-examples/nextjs-commerce/
yarn install

Deploy to Layer0:

npm run layer0:deploy

Learn more

For more details on using Next.js on Layer0 refer to the Next.js Guide.

Deploying the official Next.js Commerce repository

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

Register for a free account on the Layer0 sign up page.
Install the Layer0 CLI globally

npm i -g @layer0/cli

Clone the official Next.js Commerce repository and install the dependencies via yarn:

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

Run Layer0 init in the project directory:

layer0 init

Update the top of your next.config.js file to wrap the module export with withLayer0 and withServiceWorker like so:

const { withLayer0, withServiceWorker } = require('@layer0/next/config')

module.exports = withLayer0(
  withServiceWorker(
    bundleAnalyzer({
      // ...rest of the next.config.js content
      // !! Don't forget to add two additional closing parenthesis in the line below !!
    }),
  ),
)

Remove this section from package.json which uses Webpack 5:

  "resolutions": {
    "webpack": "5.11.1"
  },

Add the encoding package:

yarn add encoding

Create a file called .env.local in the project directory and add your BigCommerce API keys to it:

# Created by Vercel CLI
BIGCOMMERCE_STORE_API_CLIENT_ID="XXXXX"
BIGCOMMERCE_STORE_API_TOKEN="XXXX"
BIGCOMMERCE_STOREFRONT_API_TOKEN="XXX"
BIGCOMMERCE_CHANNEL_ID="XXX"
BIGCOMMERCE_STOREFRONT_API_URL="https://store-XXXX-XXXX.mybigcommerce.com/graphql"
BIGCOMMERCE_STORE_API_URL="https://api.bigcommerce.com/stores/XXXX"

An example .env.local file is in the the Layer0 examples repo.

Deploy to Layer0:

layer0 deploy

This should result in output like the following which confirms the deployment:

***** Deployment Complete ***************************************************************
*                                                                                       *
*  🖥  Layer0 Developer Console:                                                            *
*  https://app.layer0.co/ishan-scratch/nextjs-commerce/env/default/builds/1               *
*                                                                                       *
*  🌎 Website:                                                                          *
*  https://ishan-scratch-nextjs-commerce-default.moovweb-edge.io                        *
*                                                                                       *
*****************************************************************************************

Edit this guide on GitHub