Skip to main content
Kibo provides 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.

​
Features

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 support)

​
Contribute

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 https://github.com/KiboSoftware/nextjs-storefront.git
  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

​
Authentication

You’ll need to authenticate with the following data to configure the Next.js Storefront. Your Client ID and Shared Secret can be found in your Developer Console.
  • 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.
  • KIBO_SHARED_SECRET: Secret API key used to authenticate your application/client ID.
For example: 
KIBO_API_HOST=t1234-s1234.sandbox.mozu.com
KIBO_AUTH_HOST=t1234-s1234.sandbox.mozu.com
KIBO_CLIENT_ID=KIBO_APP.1.0.0.Release
KIBO_SHARED_SECRET=12345_Secret

​
Resources

Keep these useful commands in mind: 
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
And see the following resources for further information.