Next.js Commerce

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.

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