> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kibocommerce.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://github.com/all-contributors/all-contributors) specification and contributions of any kind are welcome.

## Demo Example

View a live demo of Kibo’s Next.js Storefront [here](https://kibo-commerce-nextjs-storefront.vercel.app/) .

## 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](/pages/getting-started#view-application-credentials "Getting Started").

* `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](https://nextjs.org/docs)
* Component Library: [Material UI 5](https://mui.com/material-ui/getting-started/overview/)
* Testing: [Jest](https://jestjs.io/docs/getting-started)
* Data Fetching / State Management: [React Query](https://react-query-v3.tanstack.com/overview)
* Localization: [Next i18Next](https://github.com/i18next/next-i18next)