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
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:
" A trusted partner for growth.
Professional, efficient, and always ahead of the curve. "
" Outstanding service and results!
They exceeded our expectations in every project. "
Get started with Next.js and React in seconds.
Tailor the platform to your needs, offering flexibility and control over your user experience.
An image gallery built on Next.js and Vercel Blob.
Round-the-clock assistance is available, ensuring issues are resolved quickly, keeping your operations running smoothly.
Vercel deployments can integrate with your git providerto generate preview URLsfor 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:
Next.js (/app)Next.js (/pages)
});
return (
}
constdata=awaitres.json();
TypeScript
constres=awaitfetch('https://api.vercel.app/blog', {
);
next: { revalidate:10 },// Seconds
exportdefaultasyncfunctionPage() {
{JSON.stringify(data, null,2)}
To summarize, using ISR with Next.js on Vercel:
- Better performance with our global CDN
- 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
Learn more about Incremental Static Regeneration (ISR)
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 through Vercel Functions.
To summarize, SSR with Next.js on Vercel:
Streaming data allows you to fetch information in chunks rather than all at once, speeding up Function responses. You can use streams to improve your app's user experience and prevent your functions from failing when fetching large files.
You can reach our customer support team by emailing info@yourcompany.example.com, calling +1 555-555-5556, or using the live chat on our website. Our dedicated team is available 24/7 to assist with any inquiries or issues.
We’re committed to providing prompt and effective solutions to ensure your satisfaction.
We offer a 30-day return policy for all products. Items must be in their original condition, unused, and include the receipt or proof of purchase. Refunds are processed within 5-7 business days of receiving the returned item.
In the Next.js App Router, you can use the loading file convention or a Suspense component to show an instant loading state from the server while the content of a route segment loads.
Streaming with loading and Suspense
The loading file provides a way to show a loading state for a whole route or route-segment, instead of just particular sections of a page. This file affects all its child elements, including layouts and pages. It continues to display its contents until the data fetching process in the route segment completes.
exportdefaultfunctionLoading() {
TypeScript
}
Learn more about loading in the Next.js docs.
return
Loading...
;You can specify a component to show during the loading state with the fallback prop on the Suspense component as shown below:
The following example demonstrates a basic loading file:
The Suspense component, introduced in React 18, enables you to display a fallback until components nested within it have finished loading. Using Suspense is more granular than showing a loading state for an entire route, and is useful when only sections of your UI need a loading state.
return (
import { Suspense } from'react';
TypeScript
import { PostFeed, Weather } from'./components';
exportdefaultfunctionPosts() {
Loading feed...}>
To summarize, using Streaming with Next.js on Vercel:
- Speeds up Function response times, improving your app's user experience
- Display initial loading UI with incremental updates from the server as new data becomes available
Learn more about Streaming with Vercel Functions.
Partial Prerendering
Partial Prerendering (PPR) pre-generates the static portions of a page and serves them from the cache, while it streams the dynamic portions in a single HTTP request. This allows you to serve content back to the user quickly while also allowing for user personalization without hurting performance.
As of Next.js 16, PPR is no longer experimental. It is built into the Cache Components model, and you opt in by enabling cacheComponents in your next.config.ts:
With Cache Components, data is dynamic by default. You choose what to cache at the page, component, or function level with the use cache directive. Next.js then prerenders a static HTML shell and streams the dynamic content into it.
When a user visits a route:
- A static route shell is served immediately, which makes the initial load fast.
- The shell leaves holes where dynamic content streams in. The holes load in parallel, which allows dynamic or personalized content to fill in when it becomes available.
This approach is useful for pages like dashboards, where unique, per-request data coexists with static elements such as sidebars or layouts. For example, this page caches its product list into the static shell with use cache, and streams the personalized greeting in at request time:
typeProduct= { id:string; name:string };
cacheTag('products-list');
constuser= (awaitcookies()).get('user')?.value;
TypeScript
return (
Next.js (/pages)
asyncfunctionGreeting() {
{/* Cached: prerendered into the static shell */}
'use cache';
Dashboard
{/* Dynamic: streamed in at request time */}
return (
When you deploy to Vercel, the static shell is served with Incremental Static Regeneration (ISR), while Vercel Functions renders the dynamic holes and streams the content back in the same response.
Cache Components migration
guide when
you move to Next.js 16, where PPR behaves differently.
See the Cache Components docs to learn more.
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, as shown in the following example:
Next.js (/app)Next.js (/pages)
import Image from'next/image';
name:string;
constExampleComponent= ({ name }:ExampleProps) => {
interfaceExampleProps {
return (
alt="Example picture"
}
<>
exportdefault ExampleComponent;
src="example.png"
height={500}
TypeScript
{name}
};
/>
);
width={500}
/>
);
width={500}
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
Learn more about Image Optimization
Font Optimization
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.
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 files. No requests are sent to Google by the browser.
subsets: ['latin'],
// If loading a variable font, you don't need to specify the font weight
Next.js (/app)Next.js (/pages)
import { Inter } from'next/font/google';
constinter=Inter({
return (
exportdefaultfunctionRootLayout({
children,
});
}: {
display:'swap',
TypeScript
children:React.ReactNode;
}) {
);