Next.js Commerce

Next.js Commerce, also known as Vercel Commerce, is an all-in-one open source starter kit for high-performance e-commerce sites maintained by Vercel.

Features

Next.js supports the following features:

• Performant by default
• SEO Ready
• Internationalization
• Responsive
• UI Components
• Theming
• Standardized Data Hooks
• Integrations (Integrates seamlessly with the most common e-commerce platforms, including Kibo). 
• Dark Mode Support

Demo Example

View a live demo at of Kibo's Next.js integration running on Vercel's hosting platform:

• https://kibocommerce.vercel.store/ 

You can find more information at nextjs.org/commerce. 

Configuration and Setup

Fork the https://github.com/vercel/commerce repository to your own GitHub account and then clone it to your local device.

Install the dependencies: 

npm i

If you already have a Kibo Commerce account and want to use your current store, then copy the .env.template file in this directory to .env.local in the main directory (which will be ignored by Git):

cp framework/kibocommerce/.env.template .env.local

Then, set the environment variables in .env.local to match the ones from your store.

COMMERCE_PROVIDER='kibocommerce'
KIBO_API_TOKEN=
KIBO_API_URL= 'https://t1234-s1234.sandbox.mozu.com/graphql'
KIBO_CART_COOKIE='kibo_cart'
KIBO_CUSTOMER_COOKIE='kibo_customer'
KIBO_CLIENT_ID='KIBO.APP.1.0.0.Release'
KIBO_SHARED_SECRET='12345secret'
KIBO_AUTH_URL='https://home.mozu.com'

• KIBO_API_URL: Link to your GraphQL API instance.
• KIBO_CART_COOKIE: Configurable cookie name for cart.
• KIBO_CUSTOMER_COOKIE: Configurable cookie name for shopper identifier/authentication cookie.
• KIBO_CLIENT_ID: Unique Application (Client) ID of your application.
• KIBO_SHARED_SECRET: Secret API key used to authenticate your application/client ID.

Based on the config, this integration will handle authenticating your application against the API using your Client ID and Shared Secret. These can be found from your Dev Center. For more information about the Dev Center and authentication, see Getting Started.

Run the storefront locally and watch for code changes.

npm run dev