Build faster with Brease

The headless CMS designed for Next.js. Get up and running in minutes with server-side rendering and component mapping.

Get startedCore Concepts
page.tsx
// src/app/[[...slug]]/page.tsx
import { BreasePage, generateBreasePageMetadata } from 'brease-next'
import { sectionMap } from '@/lib/brease/config'
import { getPage } from '@/lib/brease/get-page'
import { notFound } from 'next/navigation'


export async function generateMetadata({ params }: Props) {
  const { slug } = await params
  const result = await getPage(slug ? slug.join('/') : '')
  if (!result.success) return {}
  return generateBreasePageMetadata(result.data)
}


export default async function Page({ params }: Props) {
  const { slug } = await params
  const result = await getPage(slug ? slug.join('/') : '')


  if (!result.success) return notFound()


  return <BreasePage page={result.data} sectionMap={sectionMap} />
}

Introduction

Brease Documentation

The complete developer documentation for the Brease headless CMS and the brease-next integration package.

Core Concepts

Understand the key entities — Sites, Environments, Sections, Collections, Templates, and how they relate to each other.

Content Modeling

Learn how to structure content in Brease: the entity hierarchy, element types, and recommended patterns.

Getting Started

Install brease-next, configure your environment, and render your first CMS-driven page in minutes.

API Reference

Complete reference for all fetch functions, components, hooks, and types exported by brease-next.

What is Brease?

Brease is a headless content management system built for agencies and development teams who need a structured, collaborative way to manage website content. It consists of two parts:

  • Brease CMS — the admin panel where content editors and developers define content structures, manage pages, and collaborate in real-time.
  • brease-next — an npm package that provides a type-safe API client, React components, and utilities for rendering Brease content in Next.js applications.

Content editors work in the CMS to create and manage pages, sections, collections, navigations, and media. Developers use brease-next to fetch that content and render it in their Next.js frontend.

How content flows

Brease CMS (admin panel)
    ↓ defines structures, fills content
Brease API (REST)
    ↓ delivers content as JSON
brease-next (npm package)
    ↓ fetches, provides context, renders
Your Next.js website

Where to start

If you are new to Brease, start with Core Concepts to understand the data model, then follow the Getting Started guide to set up your first project.

If you need to model content, read the Content Modeling section to learn how to structure Sites, Sections, Collections, Templates, and Page Types.

If you are building a frontend, jump to the brease-next Package section for API reference, components, and implementation patterns.

If you need code examples, see the Implementation Patterns section for task-oriented guides covering routing, collections, navigation, locales, media, and deployment.

Next
Core Concepts