---
title: Next.js
description: Build React applications with file-based routing, Server Components, and optimizations.
url: "https://vercel.com/kb/nextjs"
published: 2025-11-06
last_updated: 2026-07-29
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

# Next.js

Build React applications with file-based routing, Server Components, and optimizations.

## All Next.js guides

- [Identify users and control access in Next.js with Vercel Passport](/kb/guide/vercel-passport-nextjs): Use \`getIdentity()\` to read a visitor’s verified Vercel Passport identity in Next.js, then personalize pages, restrict routes by group, and log actions.
- [Using Vercel Passport with Microsoft Entra ID](/kb/guide/vercel-passport-microsoft-entra-id): Configure Microsoft Entra ID and Vercel Passport to protect a Next.js app, limit access to assigned users, and read verified visitor identities.
- [How to deploy a Python backend with Vercel Services](/kb/guide/python-backend-on-vercel): Deploy a Python backend with a Next.js frontend on Vercel. Learn how to configure both apps with Vercel Services, use a separate database for each environment, and review changes at a Preview URL.
- [How to architect multi-location QSR menus on Vercel](/kb/guide/multi-location-qsr-menus): Multi-location QSR menus vary by price, hours, and availability. Learn how to model them on Vercel with ISR, Global Config, and crawlable location pages.
- [A/B testing on ecommerce storefronts without hurting Core Web Vitals](/kb/guide/ecommerce-ab-testing-core-web-vitals): Client-side A/B tools can worsen LCP and CLS on the pages you're testing. Run ecommerce A/B tests at the edge with Routing Middleware and Vercel Flags.
- [Rendering strategies for retail: ISR vs SSR vs static](/kb/guide/ssr-vs-ssg-vs-isr-vs-csr-for-ecommerce): Choose between SSR, SSG, ISR, and CSR for each ecommerce surface. Compare rendering modes on freshness, personalization, SEO, and cost.
- [Making your catalog discoverable to AI agents](/kb/guide/agentic-commerce-readiness): Agentic commerce readiness starts with the initial HTML response. Server-render your product catalog, ship JSON-LD, and verify AI agents can read it.
- [How to optimize Next.js and Sitecore Content SDK apps](/kb/guide/how-to-optimize-next.js-sitecore-content-sdk): Learn how to choose a rendering strategy, configure proxy middleware, and optimize costs for Next.js and Sitecore Content SDK apps on Vercel.
- [How to prototype a storefront section in v0 and ship it to Next.js](/kb/guide/how-to-prototype-a-storefront-section-in-v0): Learn how v0 prototyping works for storefront sections, from a scoped prompt to a pull request in your existing Next.js repository.
- [How to reduce Vercel Image Optimization costs](/kb/guide/reduce-image-optimization-costs-on-vercel): Learn how to reduce Vercel Image Optimization costs in Next.js by tuning cache TTLs, image sizes, formats, and quality. Diagnose high image transformation count and verify savings using the Vercel Dashboard.
- [Build a v0-style app builder with OpenAI Agents API and Vercel Sandbox](/kb/guide/v0-clone-openai-agents-vercel-sandbox): Build a chat-to-app workspace with live Next.js previews, follow-up edits, and saved projects using the OpenAI Agents API preview, Vercel Sandbox, and Queues.
- [How to revalidate Sitecore pages on publish with Next.js](/kb/guide/update-sitecore-content-manually): Learn how to use a Sitecore Experience Edge webhook and Next.js revalidatePath to refresh cached Sitecore Content SDK pages after each publish.
- [How to choose a Salesforce Commerce Cloud storefront: PWA Kit, Storefront Next, or Next.js](/kb/guide/salesforce-pwa-kit-vs-storefront-next-vs-nextjs): Compare PWA Kit, Storefront Next, and a Next.js storefront on Vercel for Salesforce Commerce Cloud. Learn how caching, personalization, SCAPI, deployment, support, and migration effort change across the three options.
- [How to architect an AI evaluation dashboard on Vercel](/kb/guide/ai-evaluation-dashboard-architecture-on-vercel): Map eval orchestration, traces, and run storage to AI Gateway, Observability, and Marketplace Postgres, and learn when self-hosted LiteLLM or Langfuse fits better.
- [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store.
- [Build a real-time chat app with WebSockets on Vercel](/kb/guide/real-time-chat-websockets): Build and deploy a single-room messaging app in Next.js with real-time chat, typing indicators, and live online user counts using WebSockets and Redis.
- [Using xmcp with Next.js](/kb/guide/using-xmcp-with-nextjs): Add an MCP server to an existing Next.js app with xmcp. Create typed tools, add authentication, and deploy to Vercel as a Vercel Function.
- [Next.js on Vercel vs Cloudflare](/kb/guide/next-js-on-vercel-vs-cloudflare): Compare running Next.js on Vercel Functions with Fluid compute against Cloudflare Workers with the OpenNext Cloudflare adapter. Learn how feature support, caching, storage, background jobs, pricing, and developer experience differ so you can choose the right platform.
- [Next.js on Vercel vs Netlify](/kb/guide/nextjs-on-vercel-vs-netlify): Compare running Next.js on Vercel Functions with Fluid compute against Netlify Functions and the OpenNext adapter. Learn how feature support, caching, storage, background jobs, pricing, and developer experience differ so you can choose the right platform.
- [Next.js on Vercel vs Webflow Cloud](/kb/guide/next-js-on-vercel-vs-webflow-cloud): Compare running Next.js on Vercel Functions with Fluid compute against Webflow Cloud on Cloudflare Workers. Learn how Next.js feature support, runtimes, storage, pricing, and developer experience differ so you can choose the right platform.
- [Migrate a Next.js app from Webflow Cloud to Vercel](/kb/guide/migrate-a-next-js-app-from-webflow-cloud-to-vercel): Move your Next.js app from Webflow Cloud to Vercel: remove the OpenNext Cloudflare adapter, drop the base path, map storage bindings to Vercel Blob, Redis, and Postgres, and deploy with Git or the vercel CLI.
- [Vercel vs Webflow Cloud](/kb/guide/vercel-vs-webflow-cloud): Compare Vercel and Webflow Cloud for deploying Next.js and Astro apps, including runtime, framework support, storage, pricing, and where your code runs.
- [Adding keyboard shortcuts to React apps with TanStack Hotkeys](/kb/guide/adding-keyboard-shortcuts-to-react-apps-with-tanstack-hotkeys): Add cross-platform keyboard shortcuts to your React app with TanStack Hotkeys. Install, register, scope, and display shortcuts with platform-aware labels.
- [What is WorkflowAgent?](/kb/guide/what-is-workflowagent): Build durable AI agents with WorkflowAgent: tool calls that retry as workflow steps, suspend for human approval, and resume after timeouts or page refreshes.
- [Human-in-the-Loop with Chat SDK and Workflow SDK](/kb/guide/human-in-the-loop-with-chat-sdk-and-workflow-sdk): Combine Chat SDK and Workflow SDK to suspend workflows on approval cards in a chat platform, then resume on click via createWebhook.
- [The Complete Guide to Chat SDK](/kb/guide/the-complete-guide-to-chat-sdk): Chat SDK is a TypeScript library for building chat bots that work across Slack, Teams, Discord, Linear, and more from a single codebase. Learn how it works.
- [Build a fullstack app with Next.js 16 and Prisma Postgres](/kb/guide/nextjs-prisma-postgres): Create a fullstack blog with the Next.js App Router, Prisma, Sign in with Vercel, Prisma Postgres from the Vercel Marketplace, and deploy it to Vercel.
- [How to build a Slack bot with Next.js and Redis](/kb/guide/how-to-build-a-slack-bot-with-next-js-and-redis): This guide walks through building a Slack bot with Next.js, covering project setup, Slack app configuration, event handling, interactive features, and deployment.
- [Build a Claude Managed Agent with Vercel Workflow](/kb/guide/claude-managed-agent-vercel): Learn how to build a Claude Managed Agent on Vercel with auth, credential vaults, durable polling, and a chat UI.
- [Run and track deploys from Slack](/kb/guide/run-and-track-deploys-from-slack): Build a Slack deploy bot with Chat SDK and Vercel Workflows. Dispatch GitHub Actions from a slash command, gate production behind approval, poll for completion, and notify Linear and GitHub when the run finishes.
- [Troubleshooting Build Error: "Build step did not complete within the maximum of 45 minutes"](/kb/guide/troubleshooting-build-error-build-step-did-not-complete-within-45-minutes): Learn common reasons Vercel builds hit the 45-minute limit and how to reduce build times so your deployments stay fast and reliable.
- [Build an AI Chat Agent with Weather API Tool Calling](/kb/guide/build-ai-agent-weather-api): Build an intelligent conversational agent that fetches real-time weather data using the AI SDK, tool calling, and a backend weather API powered by Express, FastAPI or Nitro
- [Building Next.js Apps with GraphQL Fragment Colocation and Sanity CMS](/kb/guide/building-nextjs-apps-with-graphql-fragment-colocation-and-sanity-cms): Build a content-heavy Next.js app with Sanity using GraphQL fragment colocation. Compose component fragments into one type-safe query for faster ISR, fewer requests, and scalable performance.
- [How to Fix Sitecore JSS Middleware Performance](/kb/guide/how-to-fix-sitecore-jss-middleware-performance): Learn how to troubleshoot and resolve Vercel Middleware timeouts and memory errors in your Sitecore JSS application caused by URLs with many query parameters.
- [Deploying Puppeteer with Next.js on Vercel](/kb/guide/deploying-puppeteer-with-nextjs-on-vercel): This guide covers setting up Puppeteer with Next.js on Vercel for headless browser automation, featuring a practical example for generating web page screenshots efficiently.
- [Build commission-free iOS checkouts with Vercel and Paddle](/kb/guide/build-commission-free-ios-checkouts-with-vercel-and-paddle): A new ruling allows iOS apps to use external checkouts. Learn how to deploy a secure, high-performance external checkout on Vercel with Paddle and Next.js, avoiding Apple’s 30% cut while supporting Apple Pay and owning pricing and customer relationships.
- [How to enable CORS on Vercel](/kb/guide/how-to-enable-cors): Learn how to enable CORS on Vercel with vercel.json, Routing Middleware, framework config, and route handlers, plus how to fix preflight blocked by Deployment Protection.
- [Build a multi-tenant app with Next.js and Vercel](/kb/guide/nextjs-multi-tenant-application): Create a Next.js application with multi-tenancy and custom domain support on Vercel.
- [How to Integrate Optimizely Feature Experimentation with Next.js and Vercel](/kb/guide/how-to-integrate-optimizely-feature-experimentation-next-vercel): This guide covers setting up feature flags, implementing A/B tests, and optimizing performance using React Server Components and streaming.
- [How to Optimize RSC Payload Size](/kb/guide/how-to-optimize-rsc-payload-size): Learn how to use React Server Components efficiently in Next.js to reduce cost and improve performance
- [Integrate Vercel and Contentstack for your Headless CMS](/kb/guide/integrate-vercel-and-contentstack): Integrate Vercel with Contentstack, a headless CMS, to build and deploy dynamic, high-performance websites.
- [Fine-tuning GPT with OpenAI, Next.js, and Vercel AI SDK](/kb/guide/fine-tuning-openai-nextjs): In this guide, we will build Shooketh – an AI bot fine-tuned on Shakespeare's literary works with OpenAI GPT-4o and the Vercel AI SDK.
- [Using Fathom Analytics with Next.js](/kb/guide/deploying-nextjs-using-fathom-analytics-with-vercel): Learn how to integrate Fathom Analytics with Next.js.
- [How can I set a custom build timeout?](/kb/guide/custom-build-timeout): Wrap your Vercel build command with the timeout command to ensure builds terminate gracefully before exceeding Vercel’s maximum build duration.
- [Troubleshooting Builds Failing with SIGKILL or Out of Memory Errors](/kb/guide/troubleshooting-sigkill-out-of-memory-errors): Learn how to troubleshoot builds failing with SIGKILL or Out of Memory errors on a Vercel Deployment.
- [Implementing Canary Deployments on Vercel](/kb/guide/implementing_canary_deployments_on_vercel): This guide explains how to set up canary deployments on Vercel, enabling developers to gradually roll out new versions to a subset of users with minimal risk by leveraging Skew Protection, Global Config, and Middleware in Next.js.
- [Does Vercel support Ruby on Rails applications?](/kb/guide/does-vercel-support-ruby-on-rails-applications): Learn how to deploy a Ruby on Rails application on Vercel — either as a container image on Vercel Functions or as a headless backend API with a modern frontend.
- [How can I use files in Vercel Functions?](/kb/guide/how-can-i-use-files-in-serverless-functions): Learn how to import files inside Serverless Functions on Vercel.
- [Integrating AWS Secrets Manager with Vercel Using Terraform](/kb/guide/integrating_aws_secrets_manager_with_vercel_using_terraform): Learn how to seamlessly integrate AWS Secrets Manager with Vercel for enhanced security and efficiency in your web deployments using Terraform with our comprehensive guide.
- [How do I generate a “sitemap.xml” for my Next.js app on Vercel?](/kb/guide/how-do-i-generate-a-sitemap-for-my-nextjs-app-on-vercel): Guidance on how to generate a "sitemap.xml" at build time and runtime.
- [Missing routes-manifest.json file or No Output Directory when using Turborepo or NX](/kb/guide/missing-routes-manifest-or-output-turborepo-nx): How to solve the error \`The file "/vercel/path0/apps/web/.next/routes-manifest.json" couldn't be found\` or \`No Output Directory\` when using Turborepo or NX.
- [How to set up local HTTPS for Next.js and other dev servers](/kb/guide/access-nextjs-localhost-https-certificate-self-signed): Learn when you need local HTTPS, how to enable it with next dev --experimental-https, and how to clear certificate warnings on localhost.
- [How to detect when user leaves the page and display a confirmation dialog?](/kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react): Learn how to use React and Next.js to show an alert asking the user to confirm they want to exit a page using the window beforeunload event listener.
- [How to Integrate Next.js with Prismic's Headless CMS](/kb/guide/how-to-integrate-nextjs-with-prismic): Learn how to connect Next.js with Prismic's CMS and deploy the integrated website to Vercel
- [How can I share my Vercel cache across deployments?](/kb/guide/share-vercel-cache-across-deployments-nextjs): Learn how to reuse cached responses across deployments with the Next.js App Router and the Vercel Data Cache.
- [Does streaming affect SEO and can streamed content be indexed?](/kb/guide/does-streaming-affect-seo): Streamed content does not affect SEO and will still be indexed by Google. Learn more in this guide.
- [Load Google Analytics script based on user location in Next.js](/kb/guide/geolocation-script): Learn how you can conditionally load a Google Analytics script based on your user's location
- [How to Load Data from a File in Next.js](/kb/guide/loading-static-file-nextjs-api-route): Learn how to display and read the contents of a static json file in your Next.js application.
- [How to use OpenAI Function Calling with Next.js and the Vercel AI SDK](/kb/guide/openai-function-calling): Learn how to use OpenAI Function Calling and Vercel AI SDK in a Next.js Application to build AI-powered user experiences.
- [Building an AI chatbot with Next.js, Langchain, and OpenAI](/kb/guide/nextjs-langchain-vercel-ai): Dive into the world of LangChain.js and Next.js with our detailed guide. Learn how to set up a chatbot, structure outputs, integrate agents, and more. Perfect for developers looking to harness the power of AI in their web applications.
- [Building an AI Chatbot with Cohere, Next.js, and the Vercel AI SDK](/kb/guide/cohere-nextjs-vercel-ai-sdk): Learn how to build a generative AI application using Cohere, Next.js, and Vercel.
- [Using PostHog with the Next.js App Router and Vercel](/kb/guide/posthog-nextjs-vercel-feature-flags-analytics): Learn how to use PostHog with Next.js and Vercel to add analytics, feature flags, and more.
- [Creating a Session Store with Redis and Next.js](/kb/guide/session-store-nextjs-redis-vercel-kv): Learn how to durably store sessions with Redis and Next.js.
- [How to Use ML Models from Hugging Face in Vercel Functions](/kb/guide/ml-models-hugging-face): This guide provides step-by-step instructions on how to integrate ML models from Hugging Face into Vercel Functions
- [How can I use Python and JavaScript in the same application?](/kb/guide/how-to-use-python-and-javascript-in-the-same-application): Unlock the power of Python and JavaScript in your apps. Learn to integrate Flask and Next.js for dynamic frontends with AI-capable backends. Perfect for developers keen on hybrid programming.
- [Using React Context for State Management with Next.js](/kb/guide/react-context-state-management-nextjs): Learn how to use React context inside Next.js in both client and server components for state management in your application.
- [How can I fix SharedArrayBuffer is not defined?](/kb/guide/fix-shared-array-buffer-not-defined-nextjs-react): Learn how to enable cross-origin isolation to fix SharedArrayBuffer not being defined.
- [What can I do when I run into build output limits with Next.js on Vercel?](/kb/guide/what-can-i-do-when-i-run-into-build-output-limits-with-next-js-on-vercel): Learn how to work with build output limits for Next.js on Vercel.
- [Building Ecommerce Sites with Next.js and Shopify](/kb/guide/building-ecommerce-sites-with-next-js-and-shopify): Learn how to integrate Next.js and Shopify together for the fastest storefronts using the Storefront GraphQL API.
- [Integrating Next.js and Contentful for your Headless CMS](/kb/guide/integrating-next-js-and-contentful-for-your-headless-cms): Next.js with Contentful gives you the power to quickly build scalable dynamic static websites with improved search engine optimization (SEO) and enhanced performance.
- [How to Configure the Cache-Control Response Header in Vercel Projects](/kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects): After reviewing this guide, you will be able to set a cache-control header of any value to be returned when a specific page of your deployment is requested.
- [What are the best practices for hosting videos on Vercel?](/kb/guide/best-practices-for-hosting-videos-on-vercel-nextjs-mp4-gif): Learn the ideal solutions for using video files like .mp4 and .gif on Vercel to prevent excess bandwidth consumption.
- [Using a Headless CMS with Vercel](/kb/guide/using-a-headless-cms-with-vercel): Learn best practices for using databases in a serverless environment with Vercel
- [How can I use AWS S3 with Vercel?](/kb/guide/how-can-i-use-aws-s3-with-vercel): Example how to use AWS S3 library on Vercel
- [How do I reduce my build time with Next.js on Vercel?](/kb/guide/how-do-i-reduce-my-build-time-with-next-js-on-vercel): Reduce Next.js build times on Vercel by pre-rendering fewer pages at build time, deferring generation with ISR and image optimization, and using faster build machines.
- [How do I perform Vercel redirects based on query strings?](/kb/guide/how-do-i-perform-vercel-redirects-based-on-query-strings): When using redirects with the \`vercel.json\` or \`next.config.js\` configuration file, your URL may contain query parameters that you would like to use in your re-direction, this is possible with 2 different methods.
- [Using Headless WordPress with Next.js and Vercel](/kb/guide/wordpress-with-vercel): Learn how to use Headless WordPress with your Next.js application and deploy it to Vercel.
- [Can I redirect from a subdomain to a subpath?](/kb/guide/can-i-redirect-from-a-subdomain-to-a-subpath): Learn how to redirect from your subdomain to a subpath on Vercel with a vercel.json file or with Next.js
- [Deploying a Monorepo Using Yarn Workspaces to Vercel](/kb/guide/deploying-yarn-monorepos-to-vercel): In this guide, you will deploy a monorepo that includes two frontend applications and one shared library with Yarn workspaces.
- [Custom 404 Page](/kb/guide/custom-404-page): Create a custom 404 page and deploy with Vercel.
- [Add Auth to a Next.js Site with Magic.link](/kb/guide/add-auth-to-nextjs-with-magic): Learn how to add user authentication to a Next.js site using Magic.link.
- [Getting started with Next.js, TypeScript, and Stripe Checkout](/kb/guide/getting-started-with-nextjs-typescript-stripe): Add payments functionality to your Next.js applications with Stripe and deploy to Vercel.
- [How to reduce ISR Writes by shrinking cached output](/kb/guide/how-to-reduce-isr-writes): Reduce ISR Write units by finding large changed routes and removing unnecessary data from their cached output.
- [Modifying request headers](/kb/guide/modify-request-headers): Learn how to modify request headers in your Middleware.
- [Using an SVG image in your OG image](/kb/guide/using-svg-image): Learn how to use SVG embedded content to generate your OG images.
- [Using an external image as OG image](/kb/guide/using-an-external-dynamic-image): Learn how to pass the username as a URL parameter to pull an external profile image for the image generation.
- [Rendering content based on device](/kb/guide/rendering-content-based-on-device): Learn how to render different content based on the user agent in your Middleware.
- [Encrypting parameters](/kb/guide/encrypting-parameters): Learn how to encrypt parameters so that only certain values can be passed to generate your image.
- [Using the crypto Web API to redirect requests with a unique token](/kb/guide/use-crypto-web-api): Learn how to use the Crypto Web API in your Middleware.
- [Adding a response header](/kb/guide/add-response-header): Learn how to add a response header in your Middleware.
- [OG Image Generation: The Complete Customization Guide](/kb/guide/using-custom-font): Learn how to use custom fonts in your Vercel OG image, plus emoji, external images, non-Latin text, dynamic titles, and article headlines.
- [How to move from time-based to on-demand revalidation](/kb/guide/how-to-move-to-on-demand-revalidation): Replace fixed revalidation timers with scoped updates triggered by changes to content, product data, or other application data.
- [Filtering query parameters](/kb/guide/filter-query-parameters): Learn how to filter query parameters in your Middleware.
- [How to deploy Medusa on Vercel](/kb/guide/deploy-medusa-on-vercel): Deploy a Medusa storefront on Vercel, including where the backend runs, which environment variables the current starter reads, and how to cache the catalog.
- [How to build an on-demand voice agent with Vercel Sandbox](/kb/guide/how-to-build-an-on-demand-voice-agent-with-vercel-sandbox): Build a voice AI application that creates isolated LiveKit agent environments using Vercel Sandbox, enabling real-time conversations without maintaining persistent infrastructure.
- [Using Tailwind CSS with your OG Image](/kb/guide/using-tailwind): Learn how to use Tailwind CSS to style your OG images.

## Explore other topics in the Vercel Knowledge Base

- [Infrastructure and Compute](/kb/infrastructure-and-compute): Scale and deliver applications efficiently across regions using Vercel's Fluid Compute and CDN.
- [Migrations](/kb/migrations): Learn how to migrate your application or agent to Vercel's agentic infrastructure.
- [Backends](/kb/backends): Backends on Vercel run on Fluid compute with Active CPU pricing, plus Instant Rollback, the Vercel Firewall, protected previews, and rolling releases.
- [Python](/kb/python): Build, deploy, and scale Python on Vercel. Run FastAPI, Flask, Django, or any ASGI or WSGI app on Vercel Functions with zero configuration, and find guides on background jobs, storage, AI workloads, containers, and migrating from other platforms.