Next.js Commerce

Kibo Commerce built a headless B2C e-commerce starter kit using Next.JS, Material UI, and Graphql. This kit includes pre-built components and page templates including Product Details, Product Listings, Cart, Checkout, Order History, Subscription, and Account Management.


Next.js supports the following features:

  • Performant by default
  • SEO Ready
  • Internationalization
  • Responsive
  • UI Components
  • Theming
  • Standardized Data Hooks
  • PWA Ready
  • Omni Channel Capability (Ship to home and Pickup in Store support)


This project follows the all-contributors specification and contributions of any kind are welcome.

Demo Example

View a live demo of Kibo’s Next.js Storefront here.

Getting Started

To begin development on your own version of the repo:

  1. Fork or clone the repo:
    git clone
  2. Checkout develop branch git checkout develop
  3. Run yarn to install dependencies.
  4. Create a .env file from the .env.template file
    $ cp .env.template .env.local
  5. Configure env variables for your Kibo Commerce environment.
  6. Start Dev server.
    npm run dev
  7.  Environment Example:
  8. The following data is required to configure the Kibo Next.js Storefront.
    • KIBO_API_Host: Your Kibo Commerce API Host.
    • KIBO_AUTH_HOST: Kibo Commerce Authentication Host Server. It is used to request an access token from the Kibo Commerce OAuth 2.0 service. 
    • KIBO_CLIENT_ID: Unique Application (Client) ID of your application. This is viewable from your Kibo Dev Center.
    • KIBO_SHARED_SECRET: Secret API key used to authenticate your application/client ID.

Visit Kibo documentation for more details on API authentication.

Useful GitHub Commands

  The following are useful GitHub commands:

npm run dev # Start dev server
npm run build # Run production build
npm run start # Run production start
npm run generate-types # generate typescript Kibo API types from GraphQL Schema
npm run storybook # start storybook for
npm run test # run unit / integration tests

For more information about the Dev Center and authentication, see Getting Started.


For more information, see the following resources: