Create Preview Mode in Next.js

Last updated on 3 Mar, 2022

Next.js turns to be in preview mode by setting two cookies in the user's browser. The cookie names are __prerender_bypass and __next_preview_data.

Now, in order to set these cookies, we need to create an API endpoint in Next.js like pages/api/preview.js. Then call setPreviewData({}) on the response object.

export default function handler(req, res) {
  // ...
  res.setPreviewData({});
  // ...
}

Calling the API endpoint will enable preview mode.

Set preview mode