New Project

Next.js Preview Mode

Preview content changes before publishing.

DeployView Demo
Preview Mode Demo
GitHub Repovercel/preview-mode-demo
filter section list

Related Templates

Next.js Boilerplate

Get started with Next.js and React in seconds.
Next.js Boilerplate thumbnail

Nextra: Docs Starter Kit

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.
Nextra: Docs Starter Kit thumbnail

Next.js Commerce

Starter kit for high-performance commerce with Shopify.
Next.js Commerce thumbnail
DeployView Demo

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.

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

Take Preview Mode for a spin!

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 or our Documentation.

Use Cases
Starter
Stack
Next.js
CSS Modules
Database
AWS S3