Live previews

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

    Update your CMS config to enable live previews:

    cms.tsx
    import {createCMS} from 'alinea/next'
    
    export const cms = createCMS({
      // schema and workspaces ...
      baseUrl: {
        // Point this url to your Next.js website
        development: 'http://localhost:3000'
      },
      preview: true
    })

    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.