Live previews

You can set up a live preview of your website inside the dashboard.

Create the following route in the app folder to handle previews:

app/api/preview/route.ts

import {cms} from '@/cms'

export const GET = cms.previewHandler

Update your CMS config with the preview url:

cms.tsx

import {createCMS} from 'alinea/next'

export const cms = createCMS({
  // schema and workspaces ...
  preview:
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000/api/preview'
      : '/api/preview'
})

Include the preview widget (<cms.previews />) in your root layout:

app/layout.tsx

import {cms} from '@/cms'

export default async function Layout({children}: PropsWithChildren) {
  return (
    <>
      <header />
      <main>{children}</main>
      <footer />
      <cms.previews widget />
    </>
  )
}

This will enable a little widget at the bottom of the page that confirms to the editor they're looking at a preview of the page. If you don't want a preview widget but do want live previews, remove the widget prop.

PreviousEditing content

NextTypeScript