Skip to content
← Blog
Release3 min read

Alinea 2.0

A dashboard rebuilt on React Aria, publishing that no longer waits for a deploy, and the dashboard components, now yours to build with.

Ben Merckx
2.0

Alinea 2.0 is out. It is the biggest release since 1.0: the dashboard was rebuilt from the ground up, publishing no longer waits for a deploy, and the components the dashboard is made of are now yours to use. Content still lives in your repository as JSON, your schema is still plain TypeScript, and the query API you know hasn't changed.

Publish, and it's live

Every publish is still a git commit, but your site no longer has to rebuild before editors see their change. The site syncs the new content straight after the commit, so the next request renders the latest version.

Content-only commits don't need a new deployment either. On Vercel, one line in vercel.json skips the build when nothing outside your content directory changed:

vercel.json
{
  "ignoreCommand": "git diff --quiet HEAD^ HEAD -- . ':!content'"
}

Pair it with the new afterCommit hook to revalidate static pages, and publishing takes seconds instead of a full build. The instant publishing guide walks through the setup.

A dashboard rebuilt on React Aria

The dashboard is rebuilt on React Aria Components. Keyboard navigation, focus management and screen reader support now work throughout: in the entry tree, in forms, in dialogs and in the rich text editor. We also took the chance to tidy up the interface, so it feels calmer and more consistent from the sidebar to the preview.

Build with the dashboard's own components

The components the dashboard is built from are now public, in alinea/components. Buttons, form controls, tables, trees, dialogs, menus and layout components: all accessible, themeable and driven by plain React props. Use them to build custom field views and whole dashboard sections that look and behave like the rest of Alinea.

Code
import {Button, Dialog, Table} from 'alinea/components'

Browse them in the components catalog.

Translations per field

Field.localiser keeps every locale of a value in a single field, with fallbacks. It sits next to fully translated pages, so you can translate a whole page where that makes sense and just a label or a slug where it doesn't. See internationalization for both approaches.

When an editor renames a page, its old URL is kept as an alias, so you can redirect visitors instead of serving a 404. And every entry now shows what links to it, which makes it safe to change or remove content that other pages depend on.

Commit hooks

The handler takes two new hooks. beforeCommit can inspect and rewrite changes before they are written to your repository. afterCommit runs once they are: revalidate pages, send a notification or kick off a deploy.

app/api/cms/route.ts
const handler = createHandler({
  cms,
  afterCommit() {
    revalidatePath('/', 'layout')
  }
})

Still small

For all that, Alinea still installs just 4 packages. Other CMSs pull in hundreds, so installs stay fast, your lockfile stays short and there is far less to audit. The dashboard ships with your app and runs wherever Next.js runs.

Alinea Cloud

If you'd rather not host the backend yourself, Alinea Cloud connects to your GitHub repository, handles sign-in for your editors and commits published content back to the repository. It's free while in beta.

Upgrading

Coming from 1.x? The upgrade guide covers what changed and how to move your project over. If you're new, the quickstart gets Alinea running in a Next.js project in a few minutes.

Thanks to everyone who tested the previews, reported issues and sent pull requests. Tell us what you build with 2.0 on GitHub.