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.
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.
This framework has a connector developed for Layer0. See Connectors for more information.
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 viayarn
:
cd layer0-examples/nextjs-commerce/
yarn install
- Deploy to Layer0:
npm run layer0:deploy
For more details on using Next.js on Layer0 refer to the Next.js Guide.
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 withwithLayer0
andwithServiceWorker
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 *
* *
*****************************************************************************************