Skip to content

Next.js is a fullstack React framework for the web, created and maintained by Vercel. Vercel's platform provides a native Next.js experience with enhanced support for all Next.js features.

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

Choose a Next.js template and deploy your first application to Vercel today. With our zero-configuration git integrations, you can get a preview url with your changes on every git push.

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).

In summary, 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) 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.

In summary, using SSR with Next.js on Vercel:

Scales to zero when not in use
Scales automatically with traffic increases

Zero-configuration support for Cache-Control headers, including stale-while-revalidate

Framework-aware infrastructure enables switching rendering between Edge/Node.js runtimes

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 increasing 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 assets.

In summary, 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
No additional services needed to procure or set up

@next/font enables built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

This also allows you to use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.

In summary, using Font Optimization with Next.js on Vercel:

Enables built-in, automatic self-hosting for font files
Loads web fonts with zero layout shift
Allows for CSS and font files to be downloaded at build time and self-hosted with the rest of your static assets
Ensures that no requests are sent to Google by the browser

To learn how to use @next/font, see Optimizing Fonts on the Next.js Docs.

Dynamic social card images (using the Open Graph protocol) allow you to create a unique image for every page of your site. This is useful when sharing links on the web through social platforms or through text message.

The @vercel/og image generation library allows you generate fast, dynamic social card images using Next.js API Routes.

On Vercel, your Next.js API Routes using Vercel OG are automatically optimized using Vercel Edge Functions and WebAssembly. This enables social card images to be generated faster, cheaper, and more scalable than self-hosted Next.js.

In summary, using Vercel OG with Next.js:

Instant, dynamic social card images without needing headless browsers
Generated images are automatically cached on the Vercel Edge Network
Image generation is co-located with the rest of your frontend codebase

Middleware is code that executes before a request is processed. Because Middleware runs before the cache, it's an effective way of providing personalization to statically generated content.

When self-hosted, Middleware is limited to a single region workload. Middleware is not distributed closer to visitors by default, without additional configuration or vendoring of Edge compute. Since Middleware runs before every request, using Edge compute is a more efficient and performant way to serve content.

In summary, using Middleware with Next.js on Vercel:

Runs using Edge Middleware which are deployed globally

Helps your team ensure great performance by default
Replaces needing additional services for customizable routing rules
Helps you achieve the best performance for serving content globally

Vercel supports streaming for Serverless Functions, Edge Functions, and React Server Components in Next.js projects. Streaming data allows you to fetch information in chunks rather than all at once, speeding up Function responses. Using streams can improve your app's user experience and prevent your Serverless and Edge Functions from failing when fetching large files.

Check out our docs on Edge Function streaming.

Speeds up Function response times, improving your app's user experience
Allows you to fetch large data without exceeding Edge and Serverless Function file size limits
Display Instant Loading UI from the server with the app/ directory

Static Assets (HTML, JSON, CSS, JavaScript) are files served directly from the Next.js server.

When self-hosting, static assets are deployed to the single region Next.js server. Static assets are not distributed closer to visitors by default, without additional configuration or vendoring of a CDN.

On Vercel, static assets are replicated and deployed to every region in our global Edge Network. This ensures that static assets are served from the closest location to the visitor, improving performance and reducing latency.

For certain static assets (e.g. the public folder in Next.js, these files are hashed and unique for each version of your application. They do not change. This means that Vercel can deploy them to every region around the world and cache them efficiently, including enabling zero-downtime rollouts.

In summary, using Static Assets with Next.js on Vercel:

Automatically optimizes and caches assets for the best performance
Makes files easily accessible through the `public` folder
Supports zero-downtime rollouts
No additional services needed to procure or set up

Preview Mode enables you view draft content from your Headless CMS immediately, while still statically generating pages in production.

When self-hosting, every request using Preview Mode hits the Next.js server, potentially incurring extra load or cost. Further, by spoofing the cookie, malicious users could attempt to gain access to your underlying Next.js server.

On Vercel, our Edge Network prevents invalid requests for Preview Mode automatically. If the preview cookie is invalid, our CDN responds and removes it. If the user is unauthenticated, you will not pay for any extra usage. Requests using Preview Mode are automatically routed to a Serverless Function instead of serving from the static cache.

In summary, using Preview Mode with Next.js on Vercel:

Easily server-render previews of static pages
Adds additional security measures to prevent malicious usage
Integrates with any headless provider of your choice

Next.js was built for collaboration. When deployed to Vercel, every Next.js Preview Deployment can be shared with your entire team for feedback.

Review and collaborate on your Next.js sites with comments, screenshots, notifications, and more – all synchronized with Slack.

Learn more about Comments.

A screenshot of comments on a Preview Deployment of the Vercel homepage.

Performance Analytics help you understand how your Next.js application is performing in the field. This helps you answer questions like: Does it load fast? Is it responsive? Is it visually stable?

When self-hosting, the reportWebVitals hook allows you to send metrics to any analytics provider. However, this requires additional configuration and setup. On Vercel, Analytics enable real-time monitoring of Core Web Vitals with zero-configuration to your Next.js application.

Learn more about Vercel Analytics.

An example of the Analytics tab on the project view.

Vercel provides built-in observability for Enterprise customers with Monitoring. The Monitoring tab allows you to visualize, explore, and monitor your usage and traffic data with a powerful query editor.

Learn more about Monitoring on Vercel.

The tool tip shows you the aggregated data for the day you're hovering over.

Next.js and Vercel integrate with your favorite tools, including:

And many more. With hundreds of templates to help you get started fast, Next.js on Vercel works with your existing workflows and tools.

  • Remote Caching: When using Next.js in a monorepo, Vercel can decrease your build times by sharing the cache across your entire organization
  • Automatic Edge Network Internationalized Routing: On your local device, next dev will simulate the entire internationalization routing system for you. When deployed to Vercel, however, your Next.js application will take advantage of Vercel's globally distributed Edge Network for dynamically routing to the right Next.js page depending on the sub path or domain.
  • Automatic Preview Deployments: git push and receive an instant URL to share with your team for feedback, with deep integration into your git workflow. Vercel supports creating any number of environments, including both branch-based and trunk-based workflows.
  • Fastest Builds: By tracing the minimal number of assets during builds, we can ensure the fastest possible Next.js build times.
  • Automatic Bundling: API Routes are automatically intelligently bundled into combined Functions, which helps reduce cold boots.
  • Support for All Features: As the creators of Next.js, our native platform supports all Next.js features including: Environment Variables, API Routes, Edge API Routes, Dynamic Routes, Catch-All Routes, Rewrites, Redirects, Headers, next export

Vercel, the creators of Next.js, provide Enterprise features for collaborating on and deploying your Next.js applications, including:

Dedicated Customer Success Engineers
Code Audits & Professional Services
HTTPS/SSL by default

Enhanced Security with Developer, Viewer, and Billing Roles

Enhanced Observability with Monitoring

Real-time Feedback with Comments

Integrations with your favorite tools

Contact us to learn more about how Vercel can help your team.

For more information on how to use Next.js with Vercel, see our guides: