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.

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 in Store 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

7.  Environment 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

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. For production and production sandboxes, use home.mozu.com.
   • 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.

Resources

For more information, see the following resources:

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