Backbencher.devBackbencher.dev

Create Preview Mode in Next.js

Published 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

Related Articles

  • Next.js Advanced Interview Questions
  • Deploy Next.js Site in Vercel with Custom Domain
  • Hello World Next.js Site for Beginners
  • Next.js Interview Questions - getStaticProps, getStaticPaths, getServerSideProps
  • Next.js Interview Questions - Getting Started
  • Next.js Interview Questions - Link
  • Next.js Interview Questions - Routing, Dynamic Routes, Catch-All Routes
  • Next.js Interview Questions
  • Run NPM Packages Without Installing Globally
  • Add Meta Description in Next.js Page
  • How to Create a New Next.js App
  • How to Add React Material UI in Next.js App
  • Hosting Next.js App in AWS Lambda Using Serverless
  • Setup Gitlab CI/CD Pipeline to Host Next.js App in AWS Lambda
  • SOLVED: Next.js Serverless NoSuchDistribution: The specified distribution does not exist.
  • Automatic Static Optimization in Next.js
  • Preview Mode in Next.js
  • Create Preview Mode in Next.js
© backbencher.dev