Docs/Content

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

export const cms = createNextCMS({
  // 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 />
    </>
  )
}

PreviousQuerying content

NextTypeScript