Alokai Next.js Guide

Welcome to the Alokai Next.js guide. This guide will help you get started with building your first Alokai application from the ground up.

This guide that will allow you to understand how elements of Alokai stack play together by building a small version of a production storefront from scratch.. We will cover everything from creating a new Alokai project to building a simple application that uses the Alokai products.

What You Will Learn

• How to create a new Alokai project
• How to build a simple Alokai application
• How to use the Alokai products

Framework of Choice

This guide will focus on Next.js as the frontend framework of choice. Next.js is a popular React framework that makes it easy to build server-rendered applications. It is a great choice for building Alokai applications because it is easy to use and has a large community of developers.

Alokai, thanks to its modular Architecture, can be used with any frontend framework. If you are interested in using Alokai with other frontend frameworks, check out our guides section for more information.

Enterprise vs Open Source

Alokai comes in two editions: Enterprise and Open Source. This guide will focus on the Enterprise edition, but the same principles apply to the Open Source edition.

You can find all available Alokai integrations in the integrations section.

Prerequisites

Before you start, you will need to have the following installed on your machine:

• Node.js - we recommend using the latest LTS version - download
• Package manager - we will use npm in this guide - download

The guide was created and tested using the following versions our our packages:

{
    "@vsf-enterprise/sapcc-api": "^9.0.1",
    "@vsf-enterprise/sapcc-types": "^3.0.2",
    "@vsf-enterprise/unified-api-sapcc": "^4.0.0",
    "@vue-storefront/middleware": "^5.0.1",
    "@storefront-ui/react": "^2.6.0",
    "@vue-storefront/next": "^4.2.0",
    "@vsf-enterprise/sap-commerce-webservices-sdk": "^4.0.0"
}

Let's get started!