Run the Next.js sample app

Before you start

Make sure you have the following ready:

• A Kontent.ai account
• Node.js
• Your favorite code editor, for example, Visual Studio Code

Once you have these ready, you'll set up a sample project and connect the app to it in a few steps.

Prepare your sample project

The Next.js sample app connects to the multi-brand sample project, a Kontent.ai project that contains content for three fictional brands, each with its own website. This gives you a realistic example of how Kontent.ai handles content for multiple channels from a single project. Using your own copy of the sample project lets you experiment freely with its content and structure.

1. In Kontent.ai, click your initials in the bottom left corner.
2. Select Projects.
3. Click Create new project in the top right corner.
4. Select Multi-site sample project and click Continue.

If you're an existing Kontent.ai user, you can also choose further details for your sample project in the next step, including the project name, subscription, and data center. Your sample project is now ready. Next, we'll initialize the app and connect it to this project.

Initialize the app

Initialize the application and its dependencies with create-next-app using either npm or yarn. Alternatively, clone the sample app’s repository and install the dependencies manually using your package manager of choice.

Set up environment variables

The app's root directory contains the .env.local.template file that defines the variables used to configure the app. Copy the file .env.local.template and name the copy .env.local. This preserves the template as a reference. Most variables in the file can be left at their default values. In the following steps, you'll fill in three required variables:

• NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID — connects the app to your sample project
• NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME — determines which brand's content the app displays
• KONTENT_PREVIEW_API_KEY — enables the app to display unpublished content

Connect your Kontent.ai project

Each Kontent.ai project has one or more environments. The environment ID uniquely identifies which one the app connects to, and this is what tells the app where to pull content from. To find your environment ID:

1. In Kontent.ai, open your sample project.
2. In Environment settings > General, click  to copy the Environment ID to your clipboard.

In the env.local file, set the variable NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID to your environment ID.

Choose which content to display

The Multi-site sample project represents a fictional healthcare company with three distinct brands: Ficto Imaging, Ficto Healthtech, and Ficto Surgical. Each brand has its own website and content, represented by a collection in Kontent.ai. In the env.local file, set NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME to the codename of the brand you want the app to display: ficto_imaging, ficto_surgical, or ficto_healthtech.

Enable content preview

The app uses the Next.js's preview mode to display unpublished content from Kontent.ai. To create a Delivery API key, go to  Project settings > API keys > Delivery API keys and click Create Delivery API key. Make sure to select Content preview under Delivery API access. In the env.local file, set KONTENT_PREVIEW_API_KEY to your new Delivery API key. If unpublished content doesn't appear, check that the API key corresponds to the correct environment.

Run the app