(Opinionated) Next.js + b10cks CMS boilerplate

Features

• Base Framework is Next.js (App Router)
• Uses b10cks CMS via @b10cks/next
• Provides a basic content structure to get started
• Live preview & visual editing through the b10cks editor
• Includes Tailwind CSS for styling
• Schema.org structured data via JSON-LD
• TypeScript support
• Configures OxLint and OxFmt with opinionated rules
• Sensible defaults for Zed editor

Prerequisites

• Node.js (version 22 or higher)
• bun

Make sure you've installed the b10cks CLI:

# Using bun
bun install -g b10cks-cli
# Using npm
npm install -g b10cks-cli
# Using yarn
yarn global add b10cks-cli

Using this boilerplate in a new project

Use the following command to create a new project based on this boilerplate. Replace <project-name> with the actual name of your project.

# bun
bunx create b10cks/next-boilerplate <project-name>
# npm
npx degit b10cks/next-boilerplate <project-name>

b10cks Setup

Follow these steps to set up b10cks:

1. Create a new b10cks account at b10cks.com.
2. Create a new space in b10cks.
3. Create a new API token in the space settings
   1. Go to Configuration > Access Tokens and click Generate Token.
   2. Copy the token and put into .env file.
4. Login via the CLI using b10cks login

Setup

# bun
bun install
# npm
npm install
# yarn
yarn install

Development Server

Start the development server on https://localhost:3001 (Next.js generates a self-signed certificate via --experimental-https):

# bun
bun run dev
# npm
npm run dev
# yarn
yarn dev

Project structure

• app/[[...slug]]/page.tsx — catch-all route; fetches content server-side, maps the b10cks meta block onto the Metadata API, and renders the block tree
• app/layout.tsx — fetches the site config (_config) for header/footer and wraps the app in B10cksNextProvider for live preview
• b10cks/ — block components and the registry (components.ts) that maps CMS block names onto them; add new blocks here
• proxy.ts — CMS-managed redirects (single lookup per page request via redirects/lookup)
• lib/ilum.ts — image URL builder for the b10cks image API, wired into next/image through a custom loader

Production

Build the application for production:

# bun
bun run build
# npm
npm run build
# yarn
yarn build

Locally preview production build:

# bun
bun run start
# npm
npm run start
# yarn
yarn start

License

MIT