Getting started

快速开始

Taking a new Next.js site from zero to authoring: what you need, install, the config file, the three routes you mount, the theme, and running it locally.

Setup

AIBlog is a package you add to a Next.js site. It gives the site's owner a place to paste text and drop photos, an AI composer that turns that material into typed blocks, and an editor that lets them change wording and pictures on the live page.

You keep the design in code. This guide takes a new site from zero to authoring.

What you need

Node 22 and pnpm
a Firebase project with Firestore and Storage, or the local emulator suite for development
an Anthropic API key for the composer, or AIBLOG_FAKE_AI=1 for offline work
an admin password

Install

Add the package and copy the environment template.

pnpm add @cyphia/aiblog
cp .env.example .env.local

The environment file names the Firebase project, the storage bucket, the model key and the admin password. In development it points at the emulators, and the same code runs unchanged in production with the real values.

Write the config

One file, aiblog.config.ts, describes the site: its name, locales and default locale; its page families with their routes, labels and editorial policy; the voice the composer writes in; and the services it runs on. Everything a client cares about lives in the page families. Everything you care about lives in services and in the stylesheet.

Mount three routes

an API catch-all at app/api/aiblog/[...path]/route.ts that exports the handlers
an admin catch-all at app/admin/[[...path]]/page.tsx that renders the Admin component
one page route per family, or one generic route that maps a URL section to a family, rendering the Doc component and, for signed-in editors, the in-situ editor

Each of these is a few lines. The site's own header, footer and home page are ordinary Next.js pages.

Write the theme

Import plain.css, then write your own stylesheet against the DOM contract. Override the tokens first: fonts, colours, measure, spacing. Reach for selectors only when a token cannot express what you want. The renderer never emits colours, fonts or widths of its own, so the theme is the only place appearance is decided.