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:

    import {cms} from '@/cms'
    export const GET = cms.previewHandler

    Update your CMS config with the preview url:

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

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

    import {cms} from '@/cms'
    export default async function Layout({children}: PropsWithChildren) {
      return (
          <header />
          <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.