KiboCommerce & Next.JS

This is a headless ecommerce starter kit for KiboCommerce platform using Next.JS
Demo: https://nextjs-storefront-kibo-commerce.vercel.app

Features

• Performant by default
• SEO Ready
• Internationalization
• Responsive
• UI Components built on top of Material UI 5
• Theming
• KiboCommerce data hooks
• PWA Ready
• Omni Channel Capability (Ship to home and Pickup in Store support)

Getting Started

1. Clone this repo

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

2. Change into directory and install dependencies

npm install

3. Copy .env template

cp .env.template .env.local

4. Configure env variables for your Kibo Commerce environment
5. Start Dev server

npm run dev

Configuration

.env example

KIBO_API_HOST=t1234-s1234.sandbox.mozu.com
KIBO_AUTH_HOST=home.mozu.com
KIBO_CLIENT_ID=KIBO_APP.1.0.0.Release
KIBO_SHARED_SECRET=12345_Secret
KIBO_PCI_HOST=payments-sb.mozu.com

The following data is required to configure the storefront to communicate with your Kibo API Client.

• apiHost - Your Kibo Commerce API Host.
• authHost - Kibo Commerce Authentication Host Server. It is used to request an access token from Kibo Commerce OAuth 2.0 service. Production and Production sandbox, use home.mozu.com
• clientId - Unique Application (Client) ID of your Application
• sharedSecret - Secret API key used to authenticate application. Viewable from your Kibo eCommerce Dev Center
• pciHost - use payments-sb.mozu.com for sandbox or pmts.mozu.com for production tenant

Visit Kibo documentation for more details on API authentication

Useful 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

Built with

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

Contributions

All contributions welcome!