{"id":567,"date":"2026-05-15T12:39:12","date_gmt":"2026-05-15T10:39:12","guid":{"rendered":"https:\/\/kitt-hub.ch\/fr\/documentation\/"},"modified":"2026-05-15T12:39:12","modified_gmt":"2026-05-15T10:39:12","slug":"new-doc-7-fr","status":"publish","type":"docs","link":"https:\/\/kitt-hub.ch\/fr\/documentation\/new-doc-7-fr\/","title":{"rendered":"New Doc 7 Fr"},"content":{"rendered":"<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Next.js<\/a> is a fullstack React framework for the web, maintained by Vercel.<\/p>\n<p class=\"my-4\">While Next.js works when self-hosting, deploying to Vercel is zero-configuration and provides additional enhancements for <span class=\"strong-module__WGWgwq__docsString\">scalability, availability, and performance globally<\/span>.<\/p>\n<h1 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h1<\/h1>\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h2<\/h2>\n<h3 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h3<\/h3>\n<h4 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h4<\/h4>\n<h5 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h5<\/h5>\n<h6 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\">Getting started h6<\/h6>\n<p class=\"geist-text p\">To get started with Next.js on Vercel:<\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-3 pl-2 leading-[160%]\">If you already have a project with Next.js, install <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/cli\" data-zone=\"same\">Vercel CLI<\/a> and run the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">vercel<\/code> command from your project&rsquo;s root directory<\/li>\n<li class=\"mb-3 pl-2 leading-[160%]\">Clone one of our Next.js example repos to your favorite git provider and deploy it on Vercel with the button below:<\/li>\n<\/ul>\n<div class=\"styles-module__DBfHPq__quickstart\">\n<article class=\"quickstart-module__qo07oa__quickstart\"><a class=\"link-module__Q1NRQq__link no-underline quickstart-module__qo07oa__cardLink\" href=\"https:\/\/vercel.com\/templates\/next.js\/nextjs-boilerplate\" data-zone=\"91c5f9\" data-prefetch=\"true\"><span class=\"flex w-11 h-11 mb-6\"><img decoding=\"async\" class=\"w-full h-full\" src=\"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg\" alt=\"\" \/><\/span><span class=\"quickstart-module__qo07oa__note\">Deploy our Next.js template, or view a live example.<\/span><\/a><\/p>\n<div class=\"quickstart-module__qo07oa__QSButtons\"><\/div>\n<div class=\"mt-3 relative\">\n<div class=\"flex relative w-full\"><\/div>\n<\/div>\n<\/article>\n<\/div>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-3 pl-2 leading-[160%]\">Or, choose a template from Vercel&rsquo;s marketplace:\n<div class=\"home-page-module__wHMVEa__templateSection\">\n<div class=\"home-page-module__wHMVEa__subheadingWrapper\">\n<div>\n<p class=\"home-page-module__wHMVEa__subheadingByline\">Get started in minutes<\/p>\n<h2 class=\"home-page-module__wHMVEa__subheading\">Deploy a new Next.js project with a template<\/h2>\n<\/div>\n<div class=\"home-page-module__wHMVEa__templateButtonWrapper home-page-module__wHMVEa__desktopOnly\"><\/div>\n<\/div>\n<div class=\"home-page-module__wHMVEa__templates\">\n<div>\n<div class=\"home-page-module__wHMVEa__templateImageWrapper\">\n<p><img decoding=\"async\" class=\"h-auto max-w-full home-page-module__wHMVEa__templateImage\" src=\"https:\/\/vercel.com\/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=3840&amp;q=75\" sizes=\"(max-width: 768px) 100vw, 600px\" srcset=\"\/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=640&amp;q=75 640w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=750&amp;q=75 750w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=828&amp;q=75 828w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=1080&amp;q=75 1080w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=1200&amp;q=75 1200w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=1920&amp;q=75 1920w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=2048&amp;q=75 2048w, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1aHobcZ8H6WY48u5CMXlOe%2F0f0efe6bd469985b692555fbcad1cc01%2Fnextjs-template.png&amp;w=3840&amp;q=75 3840w\" alt=\"Next.js Boilerplate\" width=\"600\" height=\"337.5\" data-version=\"v1\" data-nimg=\"1\" \/><\/p>\n<div class=\"home-page-module__wHMVEa__templateImageScrim\"><\/div>\n<\/div>\n<div class=\"home-page-module__wHMVEa__templateText\">\n<p class=\"home-page-module__wHMVEa__templateTitle\">Next.js Boilerplate<\/p>\n<p class=\"home-page-module__wHMVEa__templateDescription\">Get started with Next.js and React in seconds.<\/p>\n<\/div>\n<div class=\"mt-2 relative\">\n<div class=\"flex relative w-full\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<p class=\"geist-text p\">Vercel deployments can <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/git\" data-zone=\"same\">integrate with your git provider<\/a> to <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/deployments\/environments#preview-environment-pre-production\" data-zone=\"same\">generate preview URLs<\/a> for each pull request you make to your Next.js project.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\"><\/div>\n<p class=\"my-4\">Vercel supports streaming in Next.js projects with any of the following:<\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/router-handlers\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Route Handlers<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/functions\/streaming-functions\" data-zone=\"same\">Vercel Functions<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">React Server Components<\/li>\n<\/ul>\n<p class=\"my-4\">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&rsquo;s user experience and prevent your functions from failing when fetching large files.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h4 class=\"linked-heading-module__rvMliW__header text-heading-14 sm:text-heading-16\" data-components-heading=\"true\"><span id=\"streaming-with-loading-and-suspense\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#streaming-with-loading-and-suspense\">Streaming with <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">loading<\/code> and <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Suspense<\/code><\/a><\/h4>\n<\/div>\n<p class=\"my-4\">In the Next.js App Router, you can use the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">loading<\/code> file convention or a <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Suspense<\/code> component to show an instant loading state from the server while the content of a route segment loads.<\/p>\n<p class=\"my-4\">The <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">loading<\/code> 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.<\/p>\n<p class=\"my-4\">The following example demonstrates a basic <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">loading<\/code> file:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">loading.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">export default function Loading() {<\/span>\r\n<span class=\"line\">  return &lt;p&gt;Loading...&lt;\/p&gt;;<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\">Learn more about loading in the <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/loading-ui-and-streaming\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Next.js docs<\/a>.<\/p>\n<p class=\"my-4\">The <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Suspense<\/code> component, introduced in React 18, enables you to display a fallback until components nested within it have finished loading. Using <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Suspense<\/code> 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.<\/p>\n<p class=\"my-4\">You can specify a component to show during the loading state with the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">fallback<\/code> prop on the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Suspense<\/code> component as shown below:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/dashboard\/page.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">import { Suspense } from 'react';<\/span>\r\n<span class=\"line\">import { PostFeed, Weather } from '.\/components';<\/span>\r\n \r\n<span class=\"line\">export default function Posts() {<\/span>\r\n<span class=\"line\">  return (<\/span>\r\n<span class=\"line\">    &lt;section&gt;<\/span>\r\n<span class=\"line\">      &lt;Suspense fallback={&lt;p&gt;Loading feed...&lt;\/p&gt;}&gt;<\/span>\r\n<span class=\"line\">        &lt;PostFeed \/&gt;<\/span>\r\n<span class=\"line\">      &lt;\/Suspense&gt;<\/span>\r\n<span class=\"line\">      &lt;Suspense fallback={&lt;p&gt;Loading weather...&lt;\/p&gt;}&gt;<\/span>\r\n<span class=\"line\">        &lt;Weather \/&gt;<\/span>\r\n<span class=\"line\">      &lt;\/Suspense&gt;<\/span>\r\n<span class=\"line\">    &lt;\/section&gt;<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, using Streaming with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Speeds up Function response times, improving your app&rsquo;s user experience<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Display initial loading UI with incremental updates from the server as new data becomes available<\/li>\n<\/ul>\n<p class=\"my-4\">Learn more about <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/functions\/streaming-functions\" data-zone=\"same\">Streaming<\/a> with Vercel Functions.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"partial-prerendering\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#partial-prerendering\">Partial Prerendering<\/a><\/h2>\n<\/div>\n<div class=\"py-2 px-3 flex flex-col grow items-start justify-between sm:flex-row sm:items-center sm:gap-3 gap-2 min-h-10 rounded-md text-sm leading-normal break-words box-border [&amp;_svg]:!h-[1lh] text-left geist-warning v3-colors\" data-geist-note=\"\" data-version=\"v1\">\n<div class=\"m-0 flex items-start\">\n<p class=\"my-4\">Partial Prerendering as an experimental feature. It is currently <b>not suitable for production<\/b> environments.<\/p>\n<\/div>\n<\/div>\n<p class=\"my-4\">Partial Prerendering (PPR) is an <span class=\"strong-module__WGWgwq__docsString\">experimental<\/span> feature in Next.js that allows the static portions of a page to be pre-generated and served from the cache, while the dynamic portions are streamed in a single HTTP request.<\/p>\n<p class=\"my-4\">When a user visits a route:<\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">A static route <em>shell<\/em> is served immediately, this makes the initial load fast.<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">The shell leaves <em>holes<\/em> where dynamic content will be streamed in to minimize the perceived overall page load time.<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">The async holes are loaded in parallel, reducing the overall load time of the page.<\/li>\n<\/ul>\n<p class=\"my-4\">This approach is useful for pages like dashboards, where unique, per-request data coexists with static elements such as sidebars or layouts. This is different from how your application behaves today, where entire routes are either fully static or dynamic.<\/p>\n<p class=\"my-4\">See the <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/next-config-js\/partial-prerendering\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Partial Prerendering docs<\/a> to learn more.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"image-optimization\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#image-optimization\">Image Optimization<\/a><\/h2>\n<\/div>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/image-optimization\" data-zone=\"same\">Image Optimization<\/a> helps you achieve faster page loads by reducing the size of images and using modern image formats.<\/p>\n<p class=\"my-4\">When deploying to Vercel, images are automatically optimized on demand, keeping your build times fast while improving your page load performance and <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\" data-zone=\"same\">Core Web Vitals<\/a>.<\/p>\n<p class=\"my-4\">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>\n<p class=\"my-4\">To use Image Optimization with Next.js on Vercel, import the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">next\/image<\/code> component into the component you&rsquo;d like to add an image to, as shown in the following example:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"flex items-center justify-between bg-[var(--ds-background-200)] border-[var(--ds-gray-400)] pt-3 pl-4 overflow-x-auto border-b-0 pb-0\">\n<div class=\"group no-scrollbar flex flex-nowrap items-center pb-px overflow-x-auto has-[:focus-visible]:overflow-visible gap-2 !shadow-none\" role=\"tablist\" aria-orientation=\"horizontal\" data-geist-tabs=\"\" data-variant=\"secondary\" data-version=\"v1\"><\/div>\n<\/div>\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">components\/ExampleComponent.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">import Image from 'next\/image';<\/span>\r\n \r\n<span class=\"line\">interface ExampleProps {<\/span>\r\n<span class=\"line\">  name: string;<\/span>\r\n<span class=\"line\">}<\/span>\r\n \r\n<span class=\"line\">const ExampleComponent = ({ name }: ExampleProps) =&gt; {<\/span>\r\n<span class=\"line\">  return (<\/span>\r\n<span class=\"line\">    &lt;&gt;<\/span>\r\n<span class=\"line\">      &lt;Image<\/span>\r\n<span class=\"line\">        src=\"example.png\"<\/span>\r\n<span class=\"line\">        alt=\"Example picture\"<\/span>\r\n<span class=\"line\">        width={500}<\/span>\r\n<span class=\"line\">        height={500}<\/span>\r\n<span class=\"line\">      \/&gt;<\/span>\r\n<span class=\"line\">      &lt;span&gt;{name}&lt;\/span&gt;<\/span>\r\n<span class=\"line\">    &lt;\/&gt;<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">};<\/span>\r\n \r\n<span class=\"line\">export default ExampleComponent;<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, using Image Optimization with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Zero-configuration Image Optimization when using <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">next\/image<\/code><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Helps your team ensure great performance by default<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Keeps your builds fast by optimizing images on-demand<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Requires No additional services needed to procure or set up<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/image-optimization\" data-zone=\"same\">Learn more about Image Optimization<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"font-optimization\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#font-optimization\">Font Optimization<\/a><\/h2>\n<\/div>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/fonts\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\"><code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">next\/font<\/code><\/a> enables built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\/metrics#cumulative-layout-shift-cls\" data-zone=\"same\">layout shift<\/a>, thanks to the underlying CSS <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/@font-face\/size-adjust\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\"><code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">size-adjust<\/code><\/a> property.<\/p>\n<p class=\"my-4\">This also allows you to use all <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Google Fonts<\/a> 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.<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"flex items-center justify-between bg-[var(--ds-background-200)] border-[var(--ds-gray-400)] pt-3 pl-4 overflow-x-auto border-b-0 pb-0\">\n<div class=\"group no-scrollbar flex flex-nowrap items-center pb-px overflow-x-auto has-[:focus-visible]:overflow-visible gap-2 !shadow-none\" role=\"tablist\" aria-orientation=\"horizontal\" data-geist-tabs=\"\" data-variant=\"secondary\" data-version=\"v1\"><\/div>\n<\/div>\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/layout.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">import { Inter } from 'next\/font\/google';<\/span>\r\n \r\n<span class=\"line\">\/\/ If loading a variable font, you don't need to specify the font weight<\/span>\r\n<span class=\"line\">const inter = Inter({<\/span>\r\n<span class=\"line\">  subsets: ['latin'],<\/span>\r\n<span class=\"line\">  display: 'swap',<\/span>\r\n<span class=\"line\">});<\/span>\r\n \r\n<span class=\"line\">export default function RootLayout({<\/span>\r\n<span class=\"line\">  children,<\/span>\r\n<span class=\"line\">}: {<\/span>\r\n<span class=\"line\">  children: React.ReactNode;<\/span>\r\n<span class=\"line\">}) {<\/span>\r\n<span class=\"line\">  return (<\/span>\r\n<span class=\"line\">    &lt;html lang=\"en\" className={inter.className}&gt;<\/span>\r\n<span class=\"line\">      &lt;body&gt;{children}&lt;\/body&gt;<\/span>\r\n<span class=\"line\">    &lt;\/html&gt;<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, using Font Optimization with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Enables built-in, automatic self-hosting for font files<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Loads web fonts with zero layout shift<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Allows for CSS and font files to be downloaded at build time and self-hosted with the rest of your static files<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Ensures that no requests are sent to Google by the browser<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/fonts\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Learn more about Font Optimization<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"open-graph-images\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#open-graph-images\">Open Graph Images<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">Dynamic social card images (using the <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__highlight inline-flex items-center\" href=\"https:\/\/vercel.com\/docs\/og-image-generation\" data-state=\"closed\" data-zone=\"same\">Open Graph protocol<\/a>) 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.<\/p>\n<p class=\"my-4\">The <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/og-image-generation\" data-zone=\"same\">Vercel OG<\/a> image generation library allows you generate fast, dynamic social card images using Next.js API Routes.<\/p>\n<p class=\"my-4\">The following example demonstrates using OG image generation in both the Next.js Pages and App Router:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"flex items-center justify-between bg-[var(--ds-background-200)] border-[var(--ds-gray-400)] pt-3 pl-4 overflow-x-auto border-b-0 pb-0\">\n<div class=\"group no-scrollbar flex flex-nowrap items-center pb-px overflow-x-auto has-[:focus-visible]:overflow-visible gap-2 !shadow-none\" role=\"tablist\" aria-orientation=\"horizontal\" data-geist-tabs=\"\" data-variant=\"secondary\" data-version=\"v1\"><\/div>\n<\/div>\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/api\/og\/route.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">import { ImageResponse } from 'next\/og';<\/span>\r\n<span class=\"line\">\/\/ App router includes @vercel\/og.<\/span>\r\n<span class=\"line\">\/\/ No need to install it.<\/span>\r\n \r\n<span class=\"line\">export async function GET(request: Request) {<\/span>\r\n<span class=\"line\">  return new ImageResponse(<\/span>\r\n<span class=\"line\">    (<\/span>\r\n<span class=\"line\">      &lt;div<\/span>\r\n<span class=\"line\">        style={{<\/span>\r\n<span class=\"line\">          fontSize: 128,<\/span>\r\n<span class=\"line\">          background: 'white',<\/span>\r\n<span class=\"line\">          width: '100%',<\/span>\r\n<span class=\"line\">          height: '100%',<\/span>\r\n<span class=\"line\">          display: 'flex',<\/span>\r\n<span class=\"line\">          textAlign: 'center',<\/span>\r\n<span class=\"line\">          alignItems: 'center',<\/span>\r\n<span class=\"line\">          justifyContent: 'center',<\/span>\r\n<span class=\"line\">        }}<\/span>\r\n<span class=\"line\">      &gt;<\/span>\r\n<span class=\"line\">        Hello world!<\/span>\r\n<span class=\"line\">      &lt;\/div&gt;<\/span>\r\n<span class=\"line\">    ),<\/span>\r\n<span class=\"line\">    {<\/span>\r\n<span class=\"line\">      width: 1200,<\/span>\r\n<span class=\"line\">      height: 600,<\/span>\r\n<span class=\"line\">    },<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\">To see your generated image, run <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">npm run dev<\/code> in your terminal and visit the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">\/api\/og<\/code> route in your browser (most likely <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">http:\/\/localhost:3000\/api\/og<\/code>).<\/p>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, the benefits of using Vercel OG with Next.js include:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Instant, dynamic social card images without needing headless browsers<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Generated images are automatically cached on the Vercel CDN<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Image generation is co-located with the rest of your frontend codebase<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/og-image-generation\" data-zone=\"same\">Learn more about OG Image Generation<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"middleware\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#middleware\">Middleware<\/a><\/h2>\n<\/div>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/routing-middleware\" data-zone=\"same\">Middleware<\/a> is code that executes before a request is processed. Because Middleware runs before the cache, it&rsquo;s an effective way of providing personalization to statically generated content.<\/p>\n<p class=\"my-4\">When deploying middleware with Next.js on Vercel, you get access to built-in helpers that expose each request&rsquo;s geolocation information. You also get access to the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">NextRequest<\/code> and <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">NextResponse<\/code> objects, which enable rewrites, continuing the middleware chain, and more.<\/p>\n<p class=\"my-4\">See <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/routing-middleware\/api\" data-zone=\"same\">the Middleware API docs<\/a> for more information.<\/p>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, Middleware with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Runs using <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/routing-middleware\" data-zone=\"same\">Middleware<\/a> which are deployed globally<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Replaces needing additional services for customizable routing rules<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Helps you achieve the best performance for serving content globally<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/routing-middleware\" data-zone=\"same\">Learn more about Middleware<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"draft-mode\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#draft-mode\">Draft Mode<\/a><\/h2>\n<\/div>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/draft-mode\" data-zone=\"same\">Draft Mode<\/a> enables you to view draft content from your <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/solutions\/cms\" data-zone=\"same\">Headless CMS<\/a> immediately, while still statically generating pages in production.<\/p>\n<p class=\"my-4\">See <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/draft-mode#getting-started\" data-zone=\"same\">our Draft Mode docs<\/a> to learn how to use it with Next.js.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h3 class=\"linked-heading-module__rvMliW__header text-heading-16 sm:text-heading-18\" data-components-heading=\"true\"><span id=\"self-hosting-draft-mode\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#self-hosting-draft-mode\">Self-hosting Draft Mode<\/a><\/h3>\n<\/div>\n<p class=\"my-4\">When self-hosting, every request using Draft 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.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h3 class=\"linked-heading-module__rvMliW__header text-heading-16 sm:text-heading-18\" data-components-heading=\"true\"><span id=\"draft-mode-security\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#draft-mode-security\">Draft Mode security<\/a><\/h3>\n<\/div>\n<p class=\"my-4\">Deployments on Vercel automatically secure Draft Mode behind the same authentication used for Preview Comments. In order to enable or disable Draft Mode, the viewer must be logged in as a member of the <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/teams-and-accounts\" data-zone=\"same\">Team<\/a>. Once enabled, Vercel&rsquo;s CDN will bypass the ISR cache automatically and invoke the underlying <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/functions\" data-zone=\"same\">Vercel Function<\/a>.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h3 class=\"linked-heading-module__rvMliW__header text-heading-16 sm:text-heading-18\" data-components-heading=\"true\"><span id=\"enabling-draft-mode-in-preview-deployments\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#enabling-draft-mode-in-preview-deployments\">Enabling Draft Mode in Preview Deployments<\/a><\/h3>\n<\/div>\n<p class=\"my-4\">You and your team members can toggle Draft Mode in the Vercel Toolbar in <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/vercel-toolbar\/in-production-and-localhost\/add-to-production\" data-zone=\"same\">production<\/a>, <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/vercel-toolbar\/in-production-and-localhost\/add-to-localhost\" data-zone=\"same\">localhost<\/a>, and <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/deployments\/environments#preview-environment-pre-production#comments\" data-zone=\"same\">Preview Deployments<\/a>. When you do so, the toolbar will become purple to indicate Draft Mode is active.<\/p>\n<figure class=\"m-0 flex flex-col items-center\"><img loading=\"lazy\" decoding=\"async\" class=\"h-auto max-w-full rounded-[var(--geist-marketing-radius)] border-[1px] border-solid border-[var(--accents-2)] object-cover dark:hidden\" src=\"https:\/\/vercel.com\/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2F7nyt0uhk7sse4zvn.public.blob.vercel-storage.com%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Fdraft-mode%2Fdraft-toolbar1-light.png&amp;w=828&amp;q=75\" srcset=\"\/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2F7nyt0uhk7sse4zvn.public.blob.vercel-storage.com%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Fdraft-mode%2Fdraft-toolbar1-light.png&amp;w=640&amp;q=75 1x, \/vc-ap-vercel-docs\/_next\/image?url=https%3A%2F%2F7nyt0uhk7sse4zvn.public.blob.vercel-storage.com%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Fdraft-mode%2Fdraft-toolbar1-light.png&amp;w=828&amp;q=75 2x\" alt=\"The Vercel toolbar when Draft Mode is enabled.\" width=\"412\" height=\"80\" data-nimg=\"1\" \/><figcaption class=\"mt-3 text-center text-[14px] text-[var(--accents-5)]\">The Vercel toolbar when Draft Mode is enabled.<\/figcaption><\/figure>\n<p class=\"my-4\">Users outside your Vercel team cannot toggle Draft Mode.<\/p>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, the benefits of using Draft Mode with Next.js on Vercel include:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Easily server-render previews of static pages<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Adds additional security measures to prevent malicious usage<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Integrates with any headless provider of your choice<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">You can enable and disable Draft Mode in <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/comments\/how-comments-work\" data-zone=\"same\">the comments toolbar<\/a> on Preview Deployments<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/draft-mode\" data-zone=\"same\">Learn more about Draft Mode<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"web-analytics\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#web-analytics\">Web Analytics<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">Vercel&rsquo;s Web Analytics features enable you to visualize and monitor your application&rsquo;s performance over time. The Analytics section in your project&rsquo;s dashboard offers detailed insights into your website&rsquo;s visitors, with metrics like top pages, top referrers, and user demographics.<\/p>\n<p class=\"my-4\">To use Web Analytics, navigate to the Analytics section in your project dashboard sidebar on Vercel and select <span class=\"strong-module__WGWgwq__docsString\">Enable<\/span> in the modal that appears.<\/p>\n<p class=\"my-4\">To track visitors and page views, we recommend first installing our <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">@vercel\/analytics<\/code> package by running the terminal command below in the root directory of your Next.js project:<\/p>\n<div class=\"group\/copy my-4 relative rounded-md border border--gray-400 overflow-hidden\" aria-label=\"Code block - Terminal\">\n<div class=\"@container py-2 pr-3 pl-4 rounded-t-md border-b border-gray-400 min-h-12 bg-background-200\">\n<div class=\"flex items-center gap-x-10 gap-y-3 flex-wrap @[400px]:flex-nowrap\">\n<div class=\"text-gray-900 flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto pl-3 @[400px]:pl-0\">\n<div class=\"size-4\"><\/div>\n<p>Terminal<\/p>\n<\/div>\n<div class=\"flex gap-1 items-center shrink-0\">\n<div class=\"group relative flex items-center text-[var(--themed-fg)] geist-themed geist-ghost\" data-geist-select=\"\" data-version=\"v1\"><span class=\"absolute inline-flex pointer-events-none text-[var(--ds-gray-900)] transition-colors duration-150 ease-in left-3 peer-\/xsmall:left-[7px] group-hover:text-[var(--geist-foreground)]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/pnpm.svg\" alt=\"\" width=\"16\" height=\"16\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"relative rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy [&amp;_.line]:before:!hidden border-none my-0\" data-geist-code-block=\"\">\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line token-line\"><span class=\"token plain\">pnpm i @vercel<\/span><span class=\"token operator\">\/<\/span><span class=\"token plain\">analytics<\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"my-4\">Then, follow the instructions below to add the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Analytics<\/code> component to your app either using the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">pages<\/code> directory or the <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">app<\/code> directory.<\/p>\n<p class=\"my-4\">The <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">Analytics<\/code> component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.<\/p>\n<p class=\"my-4\">Add the following code to the root layout:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"flex items-center justify-between bg-[var(--ds-background-200)] border-[var(--ds-gray-400)] pt-3 pl-4 overflow-x-auto border-b-0 pb-0\">\n<div class=\"group no-scrollbar flex flex-nowrap items-center pb-px overflow-x-auto has-[:focus-visible]:overflow-visible gap-2 !shadow-none\" role=\"tablist\" aria-orientation=\"horizontal\" data-geist-tabs=\"\" data-variant=\"secondary\" data-version=\"v1\"><\/div>\n<\/div>\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/layout.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line highlighted-line\">import { Analytics } from '@vercel\/analytics\/next';<\/span>\r\n \r\n<span class=\"line\">export default function RootLayout({<\/span>\r\n<span class=\"line\">  children,<\/span>\r\n<span class=\"line\">}: {<\/span>\r\n<span class=\"line\">  children: React.ReactNode;<\/span>\r\n<span class=\"line\">}) {<\/span>\r\n<span class=\"line\">  return (<\/span>\r\n<span class=\"line\">    &lt;html lang=\"en\"&gt;<\/span>\r\n<span class=\"line\">      &lt;head&gt;<\/span>\r\n<span class=\"line\">        &lt;title&gt;Next.js&lt;\/title&gt;<\/span>\r\n<span class=\"line\">      &lt;\/head&gt;<\/span>\r\n<span class=\"line\">      &lt;body&gt;<\/span>\r\n<span class=\"line\">        {children}<\/span>\r\n<span class=\"line highlighted-line\">        &lt;Analytics \/&gt;<\/span>\r\n<span class=\"line\">      &lt;\/body&gt;<\/span>\r\n<span class=\"line\">    &lt;\/html&gt;<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, Web Analytics with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Enables you to track traffic and see your top-performing pages<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Offers you detailed breakdowns of visitor demographics, including their OS, browser, geolocation, and more<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/analytics\" data-zone=\"same\">Learn more about Web Analytics<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"speed-insights\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#speed-insights\">Speed Insights<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">You can see data about your project&rsquo;s <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\/metrics#core-web-vitals-explained\" data-zone=\"same\">Core Web Vitals<\/a> performance in your dashboard on Vercel. Doing so will allow you to track your web application&rsquo;s loading speed, responsiveness, and visual stability so you can improve the overall user experience.<\/p>\n<p class=\"my-4\">On Vercel, you can track your Next.js app&rsquo;s Core Web Vitals in your project&rsquo;s dashboard.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h3 class=\"linked-heading-module__rvMliW__header text-heading-16 sm:text-heading-18\" data-components-heading=\"true\"><span id=\"reportwebvitals\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#reportwebvitals\">reportWebVitals<\/a><\/h3>\n<\/div>\n<p class=\"my-4\">If you&rsquo;re self-hosting your app, you can use the <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/advanced-features\/measuring-performance#build-your-own\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\"><code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">useWebVitals<\/code><\/a> hook to send metrics to any analytics provider. The following example demonstrates a custom <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">WebVitals<\/code> component that you can use in your app&rsquo;s root <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">layout<\/code> file:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/_components\/web-vitals.tsx<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">'use client';<\/span>\r\n \r\n<span class=\"line\">import { useReportWebVitals } from 'next\/web-vitals';<\/span>\r\n \r\n<span class=\"line\">export function WebVitals() {<\/span>\r\n<span class=\"line\">  useReportWebVitals((metric) =&gt; {<\/span>\r\n<span class=\"line\">    console.log(metric);<\/span>\r\n<span class=\"line\">  });<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\">You could then reference your custom <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">WebVitals<\/code> component like this:<\/p>\n<div class=\"relative my-4 rounded-md border border-[var(--ds-gray-400)] overflow-hidden group\/copy rounded-b-md bg-[var(--ds-bfackground-100)]\" data-geist-code-block=\"\">\n<div class=\"py-0 pr-3 pl-4 rounded-t-md border-b border-[var(--ds-gray-400)] h-12 flex items-center bg-[var(--ds-background-200)]\">\n<div class=\"text-[var(--ds-gray-900)] flex items-center gap-2 m-0 text-[13px] min-w-0 mr-auto\">\n<div class=\"w-4 flex items-center shrink-0\" aria-hidden=\"true\"><\/div>\n<p><span class=\"inline-block truncate break-normal max-w-full min-w-0\">app\/layout.ts<\/span><\/p>\n<\/div>\n<div class=\"flex gap-1\">\n<div class=\"relative group\">\n<div class=\"py-0 px-2 border-none rounded-[5px] text-[13px] h-full flex items-center leading-none gap-1 bg-[var(--ds-background-200)] transition-colors duration-200 cursor-pointer text-[var(--ds-gray-900)] font-sans whitespace-nowrap group-focus-within:shadow-[var(--ds-focus-ring)] group-hover:bg-[var(--ds-gray-200)]\" aria-hidden=\"true\">TypeScript<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre class=\"code-block-module__vF3MAa__pre\"><code class=\"grid text-[var(--ds-gray-1000)] text-left whitespace-pre break-normal !text-[13px] leading-[20px] font-mono hyphens-none\"><span class=\"line\">import { WebVitals } from '.\/_components\/web-vitals';<\/span>\r\n \r\n<span class=\"line\">export default function Layout({ children }) {<\/span>\r\n<span class=\"line\">  return (<\/span>\r\n<span class=\"line\">    &lt;html&gt;<\/span>\r\n<span class=\"line\">      &lt;body&gt;<\/span>\r\n<span class=\"line\">        &lt;WebVitals \/&gt;<\/span>\r\n<span class=\"line\">        {children}<\/span>\r\n<span class=\"line\">      &lt;\/body&gt;<\/span>\r\n<span class=\"line\">    &lt;\/html&gt;<\/span>\r\n<span class=\"line\">  );<\/span>\r\n<span class=\"line\">}<\/span><\/code><\/pre>\n<\/div>\n<p class=\"my-4\">Next.js uses <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/github.com\/GoogleChrome\/web-vitals#web-vitals\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Google&rsquo;s <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">web-vitals<\/code> library<\/a> to measure the Web Vitals metrics available in <code class=\"code-module__V4tPXG__code code-module__V4tPXG__inlineCode\">reportWebVitals<\/code>.<\/p>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, tracking Web Vitals with Next.js on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Enables you to track traffic performance metrics, such as <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\/metrics#first-contentful-paint-fcp\" data-zone=\"same\">First Contentful Paint<\/a>, or <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\/metrics#first-input-delay-fid\" data-zone=\"same\">First Input Delay<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Enables you to view performance analytics by page name and URL for more granular analysis<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Shows you <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\/metrics#how-the-scores-are-determined\" data-zone=\"same\">a score for your app&rsquo;s performance<\/a> on each recorded metric, which you can use to track improvements or regressions<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/speed-insights\" data-zone=\"same\">Learn more about Speed Insights<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"service-integrations\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#service-integrations\">Service integrations<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">Vercel has partnered with popular service providers, such as MongoDB and Sanity, to create integrations that make using those services with Next.js easier. There are many integrations across multiple categories, such as <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/integrations#commerce\" data-zone=\"2d9dc9\" data-prefetch=\"true\">Commerce<\/a>, <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/integrations#databases\" data-zone=\"2d9dc9\" data-prefetch=\"true\">Databases<\/a>, and <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/integrations#logging\" data-zone=\"2d9dc9\" data-prefetch=\"true\">Logging<\/a>.<\/p>\n<p class=\"my-4\"><span class=\"strong-module__WGWgwq__docsString\">To summarize, Integrations on Vercel:<\/span><\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Simplify the process of connecting your preferred services to a Vercel project<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Help you achieve the optimal setup for a Vercel project using your preferred service<\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\">Configure your environment variables for you<\/li>\n<\/ul>\n<p class=\"my-4\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/integrations\" data-zone=\"2d9dc9\" data-prefetch=\"true\">Learn more about Integrations<\/a><\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"more-benefits\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#more-benefits\">More benefits<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">See <a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/frameworks\" data-zone=\"same\">our Frameworks documentation page<\/a> to learn about the benefits available to <span class=\"strong-module__WGWgwq__docsString\">all<\/span> frameworks when you deploy on Vercel.<\/p>\n<div class=\"linked-heading-module__rvMliW__container\">\n<h2 class=\"linked-heading-module__rvMliW__header text-heading-20 sm:text-heading-24\" data-components-heading=\"true\"><span id=\"more-resources\" class=\"linked-heading-module__rvMliW__target\"><\/span><a class=\"linked-heading-module__rvMliW__title [&amp;&gt;p]:m-0\" href=\"https:\/\/vercel.com\/docs\/frameworks\/full-stack\/nextjs#more-resources\">More resources<\/a><\/h2>\n<\/div>\n<p class=\"my-4\">Learn more about deploying Next.js projects on Vercel with the following resources:<\/p>\n<ul class=\"my-3 list-disc pl-6 [&amp;&gt;li::marker]:text-gray-500\">\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/nextjs-prisma-postgres\" data-zone=\"same\">Build a fullstack Next.js app<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/docs\/multi-tenant\" data-zone=\"same\">Build a multi-tenant app<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/integrating-next-js-and-contentful-for-your-headless-cms\" data-zone=\"same\">Next.js with Contenful<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/getting-started-with-nextjs-typescript-stripe\" data-zone=\"same\">Next.js with Stripe Checkout and Typescript<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/add-auth-to-nextjs-with-magic\" data-zone=\"same\">Next.js with Magic.link<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/how-do-i-generate-a-sitemap-for-my-nextjs-app-on-vercel\" data-zone=\"same\">Generate a sitemap with Next.js<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/deploying-locally-built-nextjs\" data-zone=\"same\">Next.js ecommerce with Shopify<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/vercel.com\/kb\/guide\/deploying-locally-built-nextjs\" data-zone=\"same\">Deploy a locally built Next.js app<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/www.youtube.com\/watch?v=AiiGjB2AxqA\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Deploying Next.js to Vercel<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/www.youtube.com\/watch?v=wv7w_Zx-FMU\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Learn about combining static and dynamic rendering on the same page in Next.js 14<\/a><\/li>\n<li class=\"mb-2 pl-1 leading-[1.7] [&amp;&gt;svg]:inline-flex last:mb-0\"><a class=\"link-module__Q1NRQq__link no-underline link-module__Q1NRQq__blend\" href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/loading-ui-and-streaming\" target=\"_blank\" rel=\"noopener\" data-zone=\"null\">Learn about suspense boundaries and streaming when loading your UI<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 h1 Getting started h2 Getting started h3 Getting started h4 Getting started h5 Getting started h6 To get started with Next.js [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","class_list":["post-567","docs","type-docs","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>New Doc 7 Fr - Kitt Hub<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kitt-hub.ch\/fr\/documentation\/new-doc-7-fr\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New Doc 7 Fr - Kitt Hub\" \/>\n<meta property=\"og:description\" content=\"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 h1 Getting started h2 Getting started h3 Getting started h4 Getting started h5 Getting started h6 To get started with Next.js [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"Kitt Hub\" \/>\n<meta property=\"og:image\" content=\"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/\",\"url\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/\",\"name\":\"New Doc 7 Fr - Kitt Hub\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\\\/docs-assets\\\/static\\\/topics\\\/icons\\\/next.svg\",\"datePublished\":\"2026-05-15T10:39:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\\\/docs-assets\\\/static\\\/topics\\\/icons\\\/next.svg\",\"contentUrl\":\"https:\\\/\\\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\\\/docs-assets\\\/static\\\/topics\\\/icons\\\/next.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/documentation\\\/new-doc-7-fr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kitt-hub.ch\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Doc 7 Fr\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#website\",\"url\":\"https:\\\/\\\/kitt-hub.ch\\\/\",\"name\":\"KITT::Hub\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kitt-hub.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#organization\",\"name\":\"KITT::Hub\",\"url\":\"https:\\\/\\\/kitt-hub.ch\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/kitt-hub.ch\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo_header_dark.svg\",\"contentUrl\":\"https:\\\/\\\/kitt-hub.ch\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo_header_dark.svg\",\"width\":1,\"height\":1,\"caption\":\"KITT::Hub\"},\"image\":{\"@id\":\"https:\\\/\\\/kitt-hub.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New Doc 7 Fr - Kitt Hub","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kitt-hub.ch\/fr\/documentation\/new-doc-7-fr\/","og_locale":"fr_FR","og_type":"article","og_title":"New Doc 7 Fr - Kitt Hub","og_description":"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 h1 Getting started h2 Getting started h3 Getting started h4 Getting started h5 Getting started h6 To get started with Next.js [&hellip;]","og_url":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/","og_site_name":"Kitt Hub","og_image":[{"url":"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/","url":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/","name":"New Doc 7 Fr - Kitt Hub","isPartOf":{"@id":"https:\/\/kitt-hub.ch\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/#primaryimage"},"image":{"@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg","datePublished":"2026-05-15T10:39:12+00:00","breadcrumb":{"@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/#primaryimage","url":"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg","contentUrl":"https:\/\/7nyt0uhk7sse4zvn.public.blob.vercel-storage.com\/docs-assets\/static\/topics\/icons\/next.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/kitt-hub.ch\/documentation\/new-doc-7-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kitt-hub.ch\/fr\/"},{"@type":"ListItem","position":2,"name":"New Doc 7 Fr"}]},{"@type":"WebSite","@id":"https:\/\/kitt-hub.ch\/#website","url":"https:\/\/kitt-hub.ch\/","name":"KITT::Hub","description":"","publisher":{"@id":"https:\/\/kitt-hub.ch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kitt-hub.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kitt-hub.ch\/#organization","name":"KITT::Hub","url":"https:\/\/kitt-hub.ch\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kitt-hub.ch\/#\/schema\/logo\/image\/","url":"https:\/\/kitt-hub.ch\/wp-content\/uploads\/2026\/04\/logo_header_dark.svg","contentUrl":"https:\/\/kitt-hub.ch\/wp-content\/uploads\/2026\/04\/logo_header_dark.svg","width":1,"height":1,"caption":"KITT::Hub"},"image":{"@id":"https:\/\/kitt-hub.ch\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/docs\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/docs\/567\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/docs\/567\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/kitt-hub.ch\/fr\/wp-json\/wp\/v2\/media?parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}