- Xperience by Kentico
Xperience by Kentico Headless channel & Next.js: Next.js fundamentals (Part 4)
In the previous parts of this series, we explored the process of setting up a headless channel using Xperience by Kentico and its GraphQL API. Now, we will shift our focus to the Next.js integration. In this article, I will cover key concepts of Next.js, introduce a repository with the completed integration, and walk you through the fundamentals that support the actual integration.
❓ What is Next.js?
Next.js is a framework built on top of React, designed to streamline the development of modern web applications. While React focuses on building user interfaces with reusable components, Next.js extends its capabilities by providing essential tools for routing, data fetching, rendering, and more. For developers working with Xperience by Kentico, Next.js can act as the framework that consumes content and services exposed from your .NET–based Xperience backend through a Headless channel, making it a natural fit for building headless and composable solutions.
✨ Key Features of Next.js:
- Routing:
The App Router in Next.js simplifies routing through a file-based system in the app directory. This approach is modular and hierarchical, allowing you to create layouts and nested routes. Instead of manually configuring routes, your folder structure defines them automatically. - Data Fetching:
Next.js provides flexible and efficient ways to fetch and manage data:- Server Components fetch data server-side, delivering tailored content while reducing client workload.
- Client Components enable fetching and managing data directly in the browser for dynamic interactivity.
- Built-in API routes let you define lightweight backend endpoints inside your Next.js project, useful for handling form submissions, webhooks, or custom logic.
- Rendering:
Next.js empowers developers to choose the best rendering strategy for their use case:- Server-Side Rendering (SSR) ensures fresh, dynamic content on each request.
- Static Rendering pre-generates pages during build time for performance and caching benefits.
- Client-Side Rendering (CSR) is used for interactive components rendered fully in the browser.
- Integrations and Extensibility:
Next.js can be integrated with Xperience by Kentico through a Headless channel, as well as authentication providers and third-party APIs. Its ecosystem of JavaScript tooling makes it easy to extend applications with modern workflows. - Performance and Scalability:
Built by Vercel, Next.js applications are optimized for edge and serverless deployments, making them scalable and production-ready.
🔌 Our Integration Repository
You can find numerous tutorials online to get started with Next.js, which would serve as excellent preparation for continuing with this article. However, instead of diving into those now, I’ve prepared a minimal Next.js application for you. This application renders a banner component with data sourced from Xperience by Kentico's GraphQL API.
Check out the repository here, and let's explore the building blocks of a Next.js application: https://github.com/MilanLund/xbyk-nextjs-campaign-page/tree/phase/campaign-page-banner
🗂️ App Directory Structure
A fundamental aspect of Next.js is its file-based routing system with specific conventions. Everything inside the app folder at the root of the codebase participates in routing. Let's examine this structure:
layout.tsx- The main site layout containing<html>and other primary wrapping elementsnot-found.tsx- Handles 404 page renderingrobots.ts- Generates the robots.txt filesitemap.ts- Generates the sitemap.xml filecampaign/- Represents the campaign segment in the URL pathpage.tsx- Renders content for the campaign segment URL path. This page fetches data from XbyK's Headless channel and passes it to components for rendering
All these files follow the conventions detailed in the Next.js documentation.
🧱 Project Structure
Outside the app directory, our codebase is organized into several key folders:
components/- Contains reusable UI components, including our banner component. The banner component, imported by the campaign page, receives and renders data from XbyK's Headless channel. It uses scoped SCSS modules for styling and is implemented as a server component since it only renders server-fetched data without client-side interactivity or state.lib/- Houses our custom services and helper functions, which we'll explore in detail later.public/- Following Next.js convention, this folder contains static files that should be publicly accessible.styles/- Contains global styling definitions.
A crucial configuration file, next.config.js, resides in the root directory and manages Next.js-specific settings.
🐾 Next Steps
You have also noticed Apollo and GraphQL-related packages and files in the repository. These are essential for data fetching from the Headless channel. These are topic for our next article where we'll also take a hands-on approach to running the Next.js application, where we'll cover:
- Setting up the Apollo service for GraphQL integration
- Creating GraphQL query
- Generating TypeScript models for data sourced from the Headless channel
- Implementing data fetching and rendering
By the way, this is the rendered result—a banner mimicking the one from the actual Dancing Goat 🐐 site. I know it's not much, but it works perfectly as a minimal example.
About the author
Milan Lund is a Full-Stack Web Developer, Solution Architect, and Consultant for Xperience by Kentico projects, working as both a freelancer and a contractor. He specializes in building and maintaining websites using Xperience by Kentico. Milan writes articles based on his project experiences to assist both his future self and other developers.
Find out more