Getting started

Get started by creating a new Next.js project. The following will setup a project in your chosen directory. (If you'd like to add Alinea to an existing project just skip this instruction.)

npx create-next-app@latest

Install Alinea

Navigate to the newly created project directory and install the package with your preferred package manager.

npm install alinea

Initialize the project

Alinea requires a config file which can be auto-generated by running alinea init. If you prefer plain Javascript over Typescript, rename the created file from cms.ts to cms.js.

npx alinea init

Create CMS handler route

Add a handler route which handles the CMS backend and previews.

import {cms} from '@/cms'
import {createHandler} from 'alinea/next'

const handler = createHandler(cms)

export const GET = handler
export const POST = handler

Update the CMS config

We'll pass the Next.js URL to Alinea so that it can display live previews in the dashboard. The production URL is optional — Alinea will remind you to update the value when deploying.

export const cms = createCMS({
  // ... schema, workspaces

  baseUrl: {
    // Point to your Next.js website
    development: 'http://localhost:3000',
    // If hosting on vercel you can use: process.env.VERCEL_URL
    production: 'http://example.com'
  },

  // The handler route URL
  handlerUrl: '/api/cms',

  // The admin dashboard will be bundled in this static file
  dashboardFile: 'admin.html'
})

Adjust Next.js config

To work around a few Next.js quirks some config changes are needed. Alinea exports a function to do this for you:

const {withAlinea} = require('alinea/next')

const nextConfig = {...}

module.exports = withAlinea(nextConfig)