---
title: "Next.js Preview Mode"
description: "Preview content changes before publishing."
url: "https://vercel.com/templates/next.js/nextjs-preview-mode"
links:
  repository: "https://github.com/vercel/preview-mode-demo"
  demo: "https://next-preview.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Next.js+Preview+Mode&demo-description=Preview+content+changes+before+publishing.&demo-url=https%3A%2F%2Fnext-preview.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3nC7p6NQFXY6Pu5YQDWMSZ%2Fc2a84fee8d9a14f4c28c111b07063826%2FCleanShot_2022-04-13_at_17.22.19_2x.png&project-name=Next.js+Preview+Mode&repository-name=nextjs-preview-mode&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fpreview-mode-demo&from=templates&skippable-integrations=1"
---

# Next.js Preview Mode

Preview content changes before publishing.

# Next.js: SSG + Preview Mode Demo

This demo showcases Next.js' next-gen Static Site Generation (SSG) support.

## About

Next.js is the first hybrid framework, allowing you to choose the technique
that fits your use case best on a per-page basis:
[Static Generation or On-Demand rendering](https://nextjs.org/docs/basic-features/data-fetching).

This application solely focuses on Static Generation (using `getStaticProps`),
however, with a game-changing new feature: Preview Mode.

[Take Preview Mode for a spin](https://next-preview.vercel.app/)!

Preview Mode leverages Next.js' on-demand rendering capabilities to bypass the
statically prerendered page and render the page on-demand for
**authorized users**.

This feature is incredibly valuable for content editors who want to view
real-time draft content from their CMS, among other use cases.

## Learn More

You can learn more about this feature in the
[Next.js 9.3 Blog Post](https://nextjs.org/blog/next-9-3) or our
[Documentation](https://nextjs.org/docs/advanced-features/preview-mode).

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.