vercel/preview-mode-demo

Stars
110
Rank 316,770 (Top 7 %)
Language
TypeScript
License
MIT License
Created almost 5 years ago
Updated about 1 year ago

vercel/preview-mode-demo

vercel

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

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

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.

next.js

The React Framework

hyper

A terminal built on web technologies

swr

React Hooks for Data Fetching

turborepo

Build system optimized for JavaScript and TypeScript, written in Rust

pkg

Package your Node.js project into an executable

vercel

Develop. Preview. Ship.

commerce

Next.js Commerce

satori

Enlightened library to convert HTML and CSS to SVG

micro

Asynchronous HTTP microservices

ai

Build AI-powered applications with React, Svelte, Vue, and Solid

serve

Static file serving and directory listing

ncc

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

styled-jsx

Full CSS support for JSX without compromises

ai-chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel

nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.

platforms

A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.

ms

Tiny millisecond conversion utility

og-image

Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

next-learn

Learn Next.js Starter Code

release

Generate changelogs with a single command

examples

Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.

hazel

Lightweight update server for Electron apps

next-plugins

Official Next.js plugins

next-app-router-playground

https://app-router.vercel.app/

geist-font

virtual-event-starter-kit

Open source demo that Next.js developers can clone, deploy, and fully customize for events.

async-retry

Retrying made simple, easy and async

react-tweet

Embed tweets in your React application.

little-date

A friendly formatter to make date ranges small & sweet

nft

Node.js dependency tracing utility

arg

Simple argument parsing

style-guide

Vercel's engineering style guide

avatar

💎 Beautiful avatars as a microservice

nextjs-postgres-nextauth-tailwindcss-template

Admin dashboard template.

modelfusion

The TypeScript library for building AI applications.

next-react-server-components

Demo repository for Next.js + React Server Components

nextjs-postgres-auth-starter

Next.js + Tailwind + Typescript + Drizzle + NextAuth + PostgreSQL starter template.

nextgram

A sample Next.js app showing dynamic routing with modals as a route.

edge-runtime

Developing, testing, and defining the runtime Web APIs for Edge infrastructure.

on-demand-isr

server-components-notes-demo

Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel.

micro-dev

The development environment for `micro`

nextjs-portfolio-starter

Easily create a portfolio with Next.js and Markdown.

async-sema

Semaphore using `async` and `await`

static-fun

A fun demo for wildcard domains

hyperpower

Hyper particle effects extension

react-keyframes

Create frame-based animations in React

title

A service for capitalizing your title properly

fetch

Opinionated `fetch` (with retrying and DNS caching) optimized for use with Node.js

serve-handler

The foundation of `serve`

vrs

A serverless virtual reality e-commerce experience powered by Vercel

storage

Vercel Postgres, KV, Blob, and Edge Config

fun

ƒun - Local serverless function λ development runtime

swr-site

The official website for SWR.

mongodb-starter

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

hyper-site

The official website for the Hyper terminal

spr-landing

Serverless Pre-Rendering Landing Page

pkg-fetch

A utility to fetch or build patched Node binaries used by `pkg` to generate executables. This repo hosts prebuilt binaries in Releases.

analytics

Privacy-friendly, real-time traffic insights

sveltekit-commerce

SvelteKit Commerce

reactions

Next.js Incremental Static Regeneration Demo

email-prompt

CLI email prompt with autocompletion and built-in validation

uid-promise

Creates a cryptographically strong UID

fetch-retry

Wrapper around `fetch` with sensible retrying defaults

git-hooks

No nonsense Git hook management

zsh-theme

Yet another zsh theme

remote-cache

The Vercel Remote Cache SDK

cosmosdb-server

A Cosmos DB server implementation for testing your applications locally.

react-transition-progress

Show a progress bar while React Transitions run

update-check

Minimalistic update notifications for command line interfaces

test-listen

Quick ephemeral URLs for your tests

terraform-provider-vercel

Terraform Vercel Provider

install-node

Simple one-liner shell script that installs official Node.js binaries

title-site

A website for capitalizing your titles

community

Welcome to the Vercel Community. Discuss feature requests, ask questions, and connect with others in the community.

nextjs-discord-bot

Discord bot for the official Next.js Discord

beginner-sveltekit

The complete course to start your journey building Svelte applications.

commerce-framework

err-sh

Microservice that forwards you to error messages

webpack-asset-relocator-loader

Used in ncc while emitting and relocating any asset references

hyperyellow

Example theme for hyperterm

schemas

All schemas used for validation that are shared between our projects

opentelemetry-collector-dev-setup

nuxt3-kitchen-sink

An example template showing all Nuxt 3 features on Vercel.

next-codemod

codemod transformations to help upgrade Next.js codebases

speed-insights

Vercel Speed Insights package

ai-sdk-rag-starter

wait-for

Small utility that waits for a file to exist and optionally have some permissions set.

async-listen

Promisify server.listen for your HTTP/HTTPS/TCP server.

tracing-js

An implementation of Opentracing API for honeycomb.io

example-integration

dns-cached-resolve

Caching DNS resolver

fetch-cached-dns

A decorator on top of `fetch` that caches the DNS query

resolve-node

API endpoint to resolve an arbitrary Node.js version with semver support

remark-capitalize

Transform all markdown titles with title.sh

cra-to-next

An example of migrating Create React App to Next.js.

otel

OTEL tracing for Vercel

stripe-integration

A Vercel deploy integration to automatically set up your Stripe API keys and webhook secrets.

rcurl

`curl --resolve` helper script

gatsby-plugin-vercel

Track Core Web Vitals in Gatsby projects with Vercel Analytics.