<style>
@font-face {
font-family: "Geist Sans";
src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}
body {
min-height: 100vh;
font-weight: 80;
padding: 0 4rem 0 1rem;
color: hsl(0 0% 6%);
font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons",
"Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}
mark {
color: hsl(0 0% 6%);
}
section {
margin-bottom: 2rem;
}
:where(h1, h2) {
font-weight: 120;
}
main {
padding: 0 1rem;
width: 40ch;
max-width: 100%;
margin: 0 auto;
font-size: 1.25rem;
padding: 0 0 50vmin;
}
mark {
--lightness: 80%;
--highlighted: 1;
--highlight: hsl(var(--hue, 45) 80% var(--lightness));
background: transparent;
@supports (animation-timeline: view()) {
--highlighted: 0;
animation: highlight steps(1) both;
animation-timeline: view();
animation-range: entry 100% cover 10%;
}
}
mark span {
background: linear-gradient(
120deg,
var(--highlight, lightblue) 50%,
transparent 50%
)
110% 0 / 200% 100% no-repeat;
background-position: calc((1 - var(--highlighted)) * 110%) 0;
transition: background-position 1s;
}
li,
p {
position: relative;
}
mark::after {
content: attr(data-author);
display: grid;
place-items: center;
font-variant-numeric: tabular-nums;
font-weight: bold;
position: absolute;
width: 32px;
aspect-ratio: 1;
border-radius: 12px;
background: var(--highlight);
font-weight: 80;
top: 0;
left: 100%;
translate: 50% 0;
font-size: 0.875rem;
scale: var(--highlighted);
transition: scale 0.2s;
}
@keyframes highlight {
to {
--highlighted: 1;
}
}
</style>
<main>
<section>
<h1>Next.js on Vercel</h1>
<span
>Vercel is the native Next.js platform, designed to enhance the Next.js
experience.</span
>
<p>
Next.js is a fullstack React framework for the web, maintained by Vercel.
</p>
<p>
While Next.js works when self-hosting, deploying to Vercel is
zero-configuration and provides additional enhancements for
<mark data-author="JT">
<span>scalability, availability, and performance globally.</span></mark
>
</p>
</section>
<section>
<h2 id="getting-started">Getting started</h2>
<p>There are multiple ways to get started with Next.js on Vercel:</p>
<ul>
<li>
If you already have a project with Next.js, install Vercel CLI and run
the vercel command from your project's root directory
</li>
<li>
Clone one of our Next.js example repos to your favorite git provider and
deploy it on Vercel with the button below:
</li>
<li>Or, choose a template from Vercel's marketplace:</li>
</ul>
<p>
<mark data-author="RH">
<span
>Vercel deployments can integrate with your git provider to generate
preview URLs for each pull request you make</span
></mark
>
to your Next.js project.
</p>
</section>
<section>
<h2 id="incremental-static-regeneration">
Incremental Static Regeneration
</h2>
<p>
Incremental Static Regeneration (ISR) allows you to
<mark data-author="AB" style="--hue: 280">
<span
>create or update content without redeploying your site</span
></mark
>. ISR has three main benefits for developers: better performance,
improved security, and faster build times.
</p>
<p>
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).
</p>
<p>
<mark data-author="GR" style="--hue: 30">
<span
>To enable ISR with Next.js in the app router, add an options object
with a revalidate property to your fetch requests</span
></mark
>.
</p>
<p>To summarize, using ISR with Next.js on Vercel:</p>
<ul>
<li>Better performance with our global Edge Network</li>
<li>Zero-downtime rollouts to previously statically generated pages</li>
<li>
Framework-aware infrastructure enables global content updates in 300ms
</li>
<li>Generated pages are both cached and persisted to durable storage</li>
</ul>
</section>
<section>
<h2 id="server-side-rendering-ssr-">Server-Side Rendering (SSR)</h2>
<p>
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.
</p>
<p>
On Vercel,
<mark data-author="LR" style="--hue: 220">
<span
>you can server-render Next.js applications in either the Node.js
runtime (default) with Serverless Functions or the Edge runtime with
Edge Functions</span
></mark
>. This allows you to pick the best rendering strategy on a per-page
basis.
</p>
<p>To summarize, SSR with Next.js on Vercel:</p>
<ul>
<li>Scales to zero when not in use</li>
<li>Scales automatically with traffic increases</li>
<li>
Has zero-configuration support for Cache-Control headers, including
stale-while-revalidate
</li>
<li>
Framework-aware infrastructure enables switching rendering between
Edge/Node.js runtimes
</li>
</ul>
</section>
<section>
<h2 id="image-optimization">Image Optimization</h2>
<p>
Image Optimization helps you achieve faster page loads by reducing the
size of images and using modern image formats.
</p>
<p>
When deploying to Vercel,
<mark data-author="MN" style="--hue: 140">
<span>images are automatically optimized on demand</span></mark
>, keeping your build times fast while improving your page load
performance and Core Web Vitals.
</p>
<p>
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.
</p>
<p>
To use Image Optimization with Next.js on Vercel,
<mark data-author="IR" style="--hue: 10">
<span
>import the next/image component into the component you'd like to
add an image to</span
></mark
>.
</p>
<p>To summarize, using Image Optimization with Next.js on Vercel:</p>
<ul>
<li>Zero-configuration Image Optimization when using next/image</li>
<li>Helps your team ensure great performance by default</li>
<li>
<mark data-author="SH" style="--hue: 190">
<span
>Keeps your builds fast by optimizing images on-demand</span
></mark
>
</li>
<li>Requires No additional services needed to procure or set up</li>
</ul>
</section>
</main>