Next.js on Vercel

Next.js is a fullstack React framework for the web, maintained by Vercel.

While Next.js works when self-hosting, deploying to Vercel is zero-configuration and provides additional enhancements for scalability, availability, and performance globally.

Getting started

There are multiple ways to get started with Next.js on Vercel:

• If you already have a project with Next.js, install Vercel CLI and run the vercel command from your project's root directory
• Clone one of our Next.js example repos to your favorite git provider and deploy it on Vercel with the button below:
• Or, choose a template from Vercel's marketplace:

Vercel deployments can integrate with your git provider to generate preview URLs for each pull request you make to your Next.js project.

Incremental Static Regeneration

Incremental Static Regeneration (ISR) allows you to create or update content without redeploying your site. ISR has three main benefits for developers: better performance, improved security, and faster build times.

When self-hosting, (ISR) is limited to a single region workload. Statically generated pages are not distributed closer to visitors by default, without additional configuration or vendoring of a CDN. By default, self-hosted ISR does not persist generated pages to durable storage. Instead, these files are located in the Next.js cache (which expires).

To enable ISR with Next.js in the app router, add an options object with a revalidate property to your fetch requests.

To summarize, using ISR with Next.js on Vercel:

• Better performance with our global Edge Network
• Zero-downtime rollouts to previously statically generated pages
• Framework-aware infrastructure enables global content updates in 300ms
• Generated pages are both cached and persisted to durable storage

Server-Side Rendering (SSR)

Server-Side Rendering (SSR) allows you to render pages dynamically on the server. This is useful for pages where the rendered data needs to be unique on every request. For example, checking authentication or looking at the location of an incoming request.

On Vercel, you can server-render Next.js applications in either the Node.js runtime (default) with Serverless Functions or the Edge runtime with Edge Functions. This allows you to pick the best rendering strategy on a per-page basis.

To summarize, SSR with Next.js on Vercel:

• Scales to zero when not in use
• Scales automatically with traffic increases
• Has zero-configuration support for Cache-Control headers, including stale-while-revalidate
• Framework-aware infrastructure enables switching rendering between Edge/Node.js runtimes

Image Optimization

Image Optimization helps you achieve faster page loads by reducing the size of images and using modern image formats.

When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and Core Web Vitals.

When self-hosting, Image Optimization uses the default Next.js server for optimization. This server manages the rendering of pages and serving of static files.

To use Image Optimization with Next.js on Vercel, import the next/image component into the component you'd like to add an image to.

To summarize, using Image Optimization with Next.js on Vercel:

• Zero-configuration Image Optimization when using next/image
• Helps your team ensure great performance by default
• Keeps your builds fast by optimizing images on-demand
• Requires No additional services needed to procure or set up