Next.js Commerce - Kibo Documentation

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:

Fork or clone the repo:

git clone https://github.com/KiboSoftware/nextjs-storefront.git

Checkout develop branch git checkout develop
Run yarn to install dependencies.
Create a .env file from the .env.template file
$ cp .env.template .env.local
Configure env variables for your Kibo Commerce environment.
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.

Framework: Next.JS
Component Library: Material UI 5
Testing: Jest
Data Fetching / State Management: React Query
Localization: Next i18Next

​Features

​Contribute

​Demo Example

​Getting Started

​Authentication

​Resources