Run the Next.js sample app

  • javascript icon
    JavaScript
  • dot-net icon
    .NET
  • php icon
    PHP
  • ruby icon
    Ruby
calendar icon
user iconJan Cerman
clock icon4 minutes
arrow-down-line iconDownload PDF
Run the Kontent.ai Next.js sample app and connect it to your sample project to see how your content is displayed.

A quick check

Make sure you have the following ready:
  • A Kontent.aiarrow-right-top-square icon account
  • Node.jsarrow-right-top-square icon version 18
  • Your favorite code editor, for example, Visual Studio Code

Prepare your sample project

Kontent.ai provides a selection of sample projects to showcase best practices. The Next.js sample app is based on our multi-brand sample project, illustrating how you can use a single Kontent.ai project with multiple brands and channels.
Here’s how you can create your own sample project:
  1. In Kontent.aiarrow-right-top-square icon, click your initials in the bottom left corner.
  2. Select Projects.
  3. At the end of the list, click Create multi-brand project.
  4. Select a subscription for the project.
  5. Click Create project.
You now have a project named Sample Project. Let’s use it with the sample app!

Initialize the app

Initialize the application and its dependencies with create-next-app using either npm or yarn. Alternatively, clonearrow-right-top-square icon the sample app’s repositoryarrow-right-top-square icon and use the respective package manager to install the dependencies manually.

Prepare environment variables

In the app's root directory, you'll find the .env.local.template file. This file defines the environment variables used to configure the app. Either create a copy of .env.local.template named .env.local, or rename the file directly to .env.local.

Connect your Kontent.ai project

To connect the sample app to your project, you need to know the project environment ID. The environment ID is displayed in the Environment settings of the Sample Project you’ve created in the first step.
In the env.local file, set the variable NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID to your environment ID.

Choose which content to display

The 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. You can select which brand's content the app displays by providing a valid collection codename in the NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME variable. For example, you can set the variable to ficto_imaging.

Enable content preview

The app uses the Next.js's preview mode to display unpublished content from Kontent.ai. To enable content preview, provide a valid Delivery API key to KONTENT_PREVIEW_API_KEY environment variable.
  1. In Kontent.ai, click the left drop-down at the top to open a list of projects.
  2. For the Sample Project, click cogwheel icon.
  3. In Project settings > API keys > Delivery API keys, click Create Delivery API key.

Run the app

Start a Node development server.
The application will open automatically in your browser at http://localhost:3000arrow-right-top-square icon.
  • Develop with Kontent.ai
  • Manage API keys
  • Hello World
  • Hello Web Spotlight
  • Try sample apps
  • Build apps
  • Decide navigation and URLs
  • Environments
  • Get Developer Certification
light-bulb icon
Sign in
  • Shell
Finding the Sample Project's environment ID
  • Shell
  • desktop-alt icon
  • Cheat sheets
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Run sample app
  • Adjust sample project
Copyright © 2024 Kontent.aiarrow-right-top-square icon. All rights reserved.
  • Webarrow-right-top-square icon
  • Privacy policyarrow-right-top-square icon
  • Cookies policy
  • Consent settingsarrow-right-top-square icon
  • Securityarrow-right-top-square icon
  • GDPRarrow-right-top-square icon
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!
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
npm run dev
light-bulb icon
light-bulb icon
light-bulb icon
This is where you find the Sample Project's environment ID.
  • Sign in
    More Kontent.ai sample apps
    • Angular 9 sample app, Angular Universal Starter
    • Express.js sample app showing Algolia search integration and automated content translation
    • React single-page app
    • Svelte web app with Kontent.ai in a JAMStack scenario
    • Vanilla JavaScript sample app
    Tip: We recommend using your own sample project. That way, you can freely experiment with content and its model.
    You can also access project or environment settings by opening the corresponding dropdown and clicking on the ⚙ icon next to an entry.
  • A quick check
  • Prepare your sample project
  • Initialize the app
  • Prepare environment variables
  • Connect your Kontent.ai project
  • Choose which content to display
  • Enable content preview
  • Run the app