next-drupal-preview

This package is used for editing content in the frontend.

Requirements

• NextJS
• A Drupal back-end with the module next_preview. Please refer to the documentation for instructions on how to install and configure.

Installation

First you need to install the package, you do this by running the following command:

npm install next-drupal-preview

Endpoints

You need to set up 2 endpoints in your NextJS project, one for enabling and one for disabling Next preview mode. Example:

pages/api/preview/index.ts

import { NextApiRequest, NextApiResponse } from 'next'

export default function Preview (req: NextApiRequest, res: NextApiResponse): any {
  if (typeof req.query.path !== 'string') {
      return res.redirect('/')
  }
    
  // The token is the preview key that is generated by Drupal,
  // and is used to authenticate.
  res.setPreviewData({ token: req.query.token ?? '' }, { maxAge: 60 * 60 * 24 * 30 })
  return res.redirect(req.query.path)
}

pages/api/preview/clear.ts

import { NextApiRequest, NextApiResponse } from 'next'

export default function ClearPreview (req: NextApiRequest, res: NextApiResponse): any {
  res.clearPreviewData()
  return res.redirect('/')
}

Usage

Preview banner

To display a preview banner, you need to import the PreviewBanner component and place it in your page. Example:

import { DrupalPreviewBanner } from 'next-drupal-preview'

export default function Page () {
  return (
    <>
      <h1>Page</h1>
      {/* ... page content */}
      <DrupalPreviewBanner cmsUrl="https://cms.example.com" /* The Drupal CMS url */
                           id="123" /* The ID of the node entity in Drupal */
                           clearPreviewUrl="/api/preview/clear" /* The URL to the clear preview endpoint */
      />
    </>
  )
}

Customizing the banner

You can customize certain css properties of the banner using these props:

• textColor
• backgroundColor
• buttonColor
• buttonTextColor
• buttonSecondaryColor
• buttonSecondaryTextColor
• borderColor
• outline

Frontend editing

To enable editing content through the frontend using an isolated form, you need to wrap the content component with a DrupalEditable component. Example:

import { DrupalEditable } from 'next-drupal-preview'

export default function Paragraph ({ paragraph }) {
  return (
    <DrupalEditable id={paragraph.id.toString()} /* The ID of the entity in Drupal */
                    type='paragraph' /* The type of entity */
                    cmsUrl={getCmsUrl()} /* The Drupal CMS url */
                    token={token} /* The preview token from Next preview data */
    >
      <ExampleParagraph paragraph={paragraph} />
    </DrupalEditable>
  )
}