• Cheat sheets
  • Documentation
  • API reference
  • Product updates
  • Sign in
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Overview
    • Overview
    • Run sample app
      • Before you start
      • Prepare your sample project
      • Initialize the app
      • Set up environment variables
      • Connect your Kontent.ai project
      • Choose which content to display
      • Enable content preview
      • Run the app
      • Activate content preview
    • Adjust sample project

Run sample app

Martina Farkasova, Tomas Dvorak
13 minutes
  • TypeScript
  • .NET
0% complete
Set up the sample app, connect it to a Kontent.ai sample project, and see firsthand how a front-end application pulls and displays content in a realistic multi-brand setup.
Want to build from a starter template?These sample apps are lightweight foundations you can build your own Kontent.ai project on:
  • React with GraphQL sample app
  • Svelte sample app
  • SolidJS sample app
  • Vue sample app
This lesson covers the sample app, which demonstrates a fully built, multi-brand setup and gives you a fuller picture of what Kontent.ai can do.

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 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 and subscription. Your sample project is now ready. Next, you'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.
Shell
npx create-next-app --example https://github.com/kontent-ai/sample-app-next-js sample-app-next-js
# or
yarn create next-app --example https://github.com/kontent-ai/sample-app-next-js sample-app-next-js
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.
Finding the Sample Project's environment ID
This is where you find the sample project's environment ID.
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_healthtech, or ficto_surgical.

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.
You can also access project or environment settings by opening the corresponding dropdown in the top left corner and clicking on the icon next to an entry.
In the env.local file, set KONTENT_PREVIEW_API_KEY to your new Delivery API key.

Run the app

Start a development server.
Shell
npm run dev
The application runs locally at http://localhost:3000 by default.

Activate content preview

To activate preview mode, visit the following URL using the default port: http://localhost:3000/api/preview?secret=mySuperSecret&type=website_root&slug=home. Replace the port if your app runs on a different one. This activates Next.js's Draft Mode, which lets the app use your stored API key to fetch unpublished content.
If the app shows a blank page on startup or you see an error page, check that KONTENT_PREVIEW_API_KEY isn't left empty in .env.local and that the key corresponds to the correct environment.
To disable Preview mode, add /api/exit-preview to your local URL. If you are using the default port, visit http://localhost:3000/api/exit-preview.
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
Sign in
Copyright © 2026 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR