Building a Next.js Sample App with Kontent.ai

In this post, we walk through the process of building a sample application using Next.js and Kontent.ai, using the 'Create multi-brand project' feature to manage content for multiple brands in a single project.

Introduction

Next.js is a popular React framework that enables developers to build server-side rendering and static web applications. It's known for its performance, scalability, and ease of use. Kontent.ai is a headless CMS that allows you to manage your content in one place and deliver it via APIs. The 'Create multi-brand project' feature allows you to manage content for multiple brands in a single project, making it easier to maintain consistency and efficiency.

Setting Up Your Development Environment

Before we start, make sure you have the following installed on your system:

• —Node.js and npm
• —Git
• —A code editor like Visual Studio Code

Creating a New Next.js App

Create a new Next.js application by running `npx create-next-app@latest my-app` in your terminal. This command will create a new Next.js application in a directory called `my-app`.

Setting Up Kontent.ai

If you don't have a Kontent.ai account yet, sign up for a free one on their website. Once you're logged in, create a new project using the 'Create multi-brand project' feature.

Integrating Kontent.ai with Next.js

With the Next.js app and Kontent.ai project set up, it's time to integrate the two. Use the `@kentico/kontent-delivery` package to fetch content from Kontent.ai and display it in your Next.js app. Install it by running `npm install @kentico/kontent-delivery`.

Fetching Content from Kontent.ai

With the package installed, instantiate a `DeliveryClient` with your project ID, then call `.items().type('article').toPromise()` to retrieve your content. The response contains strongly-typed item models you can render directly in your Next.js pages or components.

Conclusion

This walkthrough covers the fundamentals of connecting Next.js to Kontent.ai using the multi-brand project feature. For a production-ready reference, see the official Kontent.ai Next.js sample app on GitHub: github.com/kontent-ai/sample-app-next-js.