Tutorial

Integrating Localess with Next.js App Router

A practical guide to wiring up Localess as your content source in a Next.js 15+ project using the App Router.

·
Alex Carter· Developer Advocate
A practical guide to wiring up Localess as your content source in a Next.js 15+ project using the App Router.

Next.js App Router and Localess are a perfect match. Server Components fetch content at build time, while Client Components handle live preview sync in the Visual Editor.

Installation

npm install @localess/react

Configure the client

Create lib/localess.ts and call localessInit once at the root of your app:

localessInit({
  origin: process.env.NEXT_PUBLIC_LOCALESS_ORIGIN!,
  spaceId: process.env.NEXT_PUBLIC_LOCALESS_SPACE_ID!,
  token: isServer() ? process.env.LOCALESS_TOKEN! : '',
});

Fetch content in a Server Component

const client = getLocalessClient();
const content = await client.getContentBySlug<HomePage>('home');
return <LocalessComponent data={content.data} />;