# Next.js Documentation @doc-version: 16.2.3 @doc-version-notes: Some features may have extended or refined behavior in minor or patch releases - [Getting Started](https://nextjs.org/docs/app/getting-started): Learn how to create full-stack web applications with the Next.js App Router. - [Installation](https://nextjs.org/docs/app/getting-started/installation): Learn how to create a new Next.js application with the `create-next-app` CLI, and set up TypeScript, ESLint, and Module Path Aliases. - [Project Structure](https://nextjs.org/docs/app/getting-started/project-structure): Learn the folder and file conventions in Next.js, and how to organize your project. - [Layouts and Pages](https://nextjs.org/docs/app/getting-started/layouts-and-pages): Learn how to create your first pages and layouts, and link between them with the Link component. - [Linking and Navigating](https://nextjs.org/docs/app/getting-started/linking-and-navigating): Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks. - [Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components): Learn how you can use React Server and Client Components to render parts of your application on the server or the client. - [Fetching Data](https://nextjs.org/docs/app/getting-started/fetching-data): Learn how to fetch data and stream content that depends on data. - [Mutating Data](https://nextjs.org/docs/app/getting-started/mutating-data): Learn how to mutate data using Server Functions and Server Actions in Next.js. - [Caching](https://nextjs.org/docs/app/getting-started/caching): Learn how to cache data and UI in Next.js - [Revalidating](https://nextjs.org/docs/app/getting-started/revalidating): Learn how to revalidate cached data using time-based and on-demand strategies. - [Error Handling](https://nextjs.org/docs/app/getting-started/error-handling): Learn how to display expected errors and handle uncaught exceptions. - [CSS](https://nextjs.org/docs/app/getting-started/css): Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more. - [Image Optimization](https://nextjs.org/docs/app/getting-started/images): Learn how to optimize images in Next.js - [Font Optimization](https://nextjs.org/docs/app/getting-started/fonts): Learn how to optimize fonts in Next.js - [Metadata and OG images](https://nextjs.org/docs/app/getting-started/metadata-and-og-images): Learn how to add metadata to your pages and create dynamic OG images. - [Route Handlers](https://nextjs.org/docs/app/getting-started/route-handlers): Learn how to use Route Handlers - [Proxy](https://nextjs.org/docs/app/getting-started/proxy): Learn how to use Proxy - [Deploying](https://nextjs.org/docs/app/getting-started/deploying): Learn how to deploy your Next.js application. - [Upgrading](https://nextjs.org/docs/app/getting-started/upgrading): Learn how to upgrade your Next.js application to the latest version or canary. - [Guides](https://nextjs.org/docs/app/guides): Learn how to implement common patterns and real-world use cases using Next.js - [AI Coding Agents](https://nextjs.org/docs/app/guides/ai-agents): Learn how to configure your Next.js project so AI coding agents use up-to-date documentation instead of outdated training data. - [Analytics](https://nextjs.org/docs/app/guides/analytics): Measure and track page performance using Next.js Speed Insights - [Authentication](https://nextjs.org/docs/app/guides/authentication): Learn how to implement authentication in your Next.js application. - [Backend for Frontend](https://nextjs.org/docs/app/guides/backend-for-frontend): Learn how to use Next.js as a backend framework - [Caching (Previous Model)](https://nextjs.org/docs/app/guides/caching-without-cache-components): Learn how to cache and revalidate data using fetch options, unstable_cache, and route segment configs for projects not using Cache Components. - [CDN Caching](https://nextjs.org/docs/app/guides/cdn-caching): Learn how CDN caching works with Next.js, including what works today, cache variability, and the direction toward pathname-based cache keying. - [CI Build Caching](https://nextjs.org/docs/app/guides/ci-build-caching): Learn how to configure CI to cache Next.js builds - [Content Security Policy](https://nextjs.org/docs/app/guides/content-security-policy): Learn how to set a Content Security Policy (CSP) for your Next.js application. - [CSS-in-JS](https://nextjs.org/docs/app/guides/css-in-js): Use CSS-in-JS libraries with Next.js - [Custom Server](https://nextjs.org/docs/app/guides/custom-server): Start a Next.js app programmatically using a custom server. - [Data Security](https://nextjs.org/docs/app/guides/data-security): Learn the built-in data security features in Next.js and learn best practices for protecting your application's data. - [Debugging](https://nextjs.org/docs/app/guides/debugging): Learn how to debug your Next.js application with VS Code, Chrome DevTools, or Firefox DevTools. - [Deploying to Platforms](https://nextjs.org/docs/app/guides/deploying-to-platforms): Understand which Next.js features require specific platform capabilities and how to choose the right deployment target. - [Draft Mode](https://nextjs.org/docs/app/guides/draft-mode): Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here. - [Environment Variables](https://nextjs.org/docs/app/guides/environment-variables): Learn to add and access environment variables in your Next.js application. - [Forms](https://nextjs.org/docs/app/guides/forms): Learn how to create forms in Next.js with React Server Actions. - [How Revalidation Works](https://nextjs.org/docs/app/guides/how-revalidation-works): A deep dive into how Next.js revalidates cached content, including the tag system, cache consistency, and multi-instance coordination. - [ISR](https://nextjs.org/docs/app/guides/incremental-static-regeneration): Learn how to create or update static pages at runtime with Incremental Static Regeneration. - [Instrumentation](https://nextjs.org/docs/app/guides/instrumentation): Learn how to use instrumentation to run code at server startup in your Next.js app - [Internationalization](https://nextjs.org/docs/app/guides/internationalization): Add support for multiple languages with internationalized routing and localized content. - [JSON-LD](https://nextjs.org/docs/app/guides/json-ld): Learn how to add JSON-LD to your Next.js application to describe your content to search engines and AI. - [Lazy Loading](https://nextjs.org/docs/app/guides/lazy-loading): Lazy load imported libraries and React Components to improve your application's loading performance. - [Development Environment](https://nextjs.org/docs/app/guides/local-development): Learn how to optimize your local development environment with Next.js. - [Next.js MCP Server](https://nextjs.org/docs/app/guides/mcp): Learn how to use Next.js MCP support to allow coding agents access to your application state - [MDX](https://nextjs.org/docs/app/guides/mdx): Learn how to configure MDX and use it in your Next.js apps. - [Memory Usage](https://nextjs.org/docs/app/guides/memory-usage): Optimize memory used by your application in development and production. - [Migrating](https://nextjs.org/docs/app/guides/migrating): Learn how to migrate from popular frameworks to Next.js - [App Router](https://nextjs.org/docs/app/guides/migrating/app-router-migration): Learn how to upgrade your existing Next.js application from the Pages Router to the App Router. - [Create React App](https://nextjs.org/docs/app/guides/migrating/from-create-react-app): Learn how to migrate your existing React application from Create React App to Next.js. - [Vite](https://nextjs.org/docs/app/guides/migrating/from-vite): Learn how to migrate your existing React application from Vite to Next.js. - [Migrating to Cache Components](https://nextjs.org/docs/app/guides/migrating-to-cache-components): Learn how to migrate from route segment configs to Cache Components in Next.js. - [Multi-tenant](https://nextjs.org/docs/app/guides/multi-tenant): Learn how to build multi-tenant apps with the App Router. - [Multi-zones](https://nextjs.org/docs/app/guides/multi-zones): Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain. - [OpenTelemetry](https://nextjs.org/docs/app/guides/open-telemetry): Learn how to instrument your Next.js app with OpenTelemetry. - [Package Bundling](https://nextjs.org/docs/app/guides/package-bundling): Learn how to analyze and optimize your application's server and client bundles with the Next.js Bundle Analyzer for Turbopack, and the `@next/bundle-analyzer` plugin for Webpack. - [PPR Platform Guide](https://nextjs.org/docs/app/guides/ppr-platform-guide): A guide for platform engineers on implementing PPR support, from basic origin rendering to optimized CDN integration. - [Prefetching](https://nextjs.org/docs/app/guides/prefetching): Learn how to configure prefetching in Next.js - [Preserving UI state](https://nextjs.org/docs/app/guides/preserving-ui-state): Learn how to control which UI state is preserved and which resets when navigating between pages. - [Production](https://nextjs.org/docs/app/guides/production-checklist): Recommendations to ensure the best performance and user experience before taking your Next.js application to production. - [PWAs](https://nextjs.org/docs/app/guides/progressive-web-apps): Learn how to build a Progressive Web Application (PWA) with Next.js. - [Public pages](https://nextjs.org/docs/app/guides/public-static-pages): Learn how to build public, "static" pages that share data across users, such as landing pages, list pages (products, blogs, etc.), marketing and news sites. - [Redirecting](https://nextjs.org/docs/app/guides/redirecting): Learn the different ways to handle redirects in Next.js. - [Rendering Philosophy](https://nextjs.org/docs/app/guides/rendering-philosophy): Learn how Next.js treats static and dynamic rendering as a spectrum at the component level, and what this means for deployment. - [Sass](https://nextjs.org/docs/app/guides/sass): Style your Next.js application using Sass. - [Scripts](https://nextjs.org/docs/app/guides/scripts): Optimize 3rd party scripts with the built-in Script component. - [Self-Hosting](https://nextjs.org/docs/app/guides/self-hosting): Learn how to self-host your Next.js application on a Node.js server, Docker image, or static HTML files (static exports). - [SPAs](https://nextjs.org/docs/app/guides/single-page-applications): Next.js fully supports building Single-Page Applications (SPAs). - [Static Exports](https://nextjs.org/docs/app/guides/static-exports): Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. - [Streaming](https://nextjs.org/docs/app/guides/streaming): Learn how streaming works in Next.js and how to use it to progressively render UI as data becomes available. - [Tailwind CSS v3](https://nextjs.org/docs/app/guides/tailwind-v3-css): Style your Next.js Application using Tailwind CSS v3 for broader browser support. - [Testing](https://nextjs.org/docs/app/guides/testing): Learn how to set up Next.js with four commonly used testing tools — Cypress, Playwright, Vitest, and Jest. - [Cypress](https://nextjs.org/docs/app/guides/testing/cypress): Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing. - [Jest](https://nextjs.org/docs/app/guides/testing/jest): Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing. - [Playwright](https://nextjs.org/docs/app/guides/testing/playwright): Learn how to set up Playwright with Next.js for End-to-End (E2E) Testing. - [Vitest](https://nextjs.org/docs/app/guides/testing/vitest): Learn how to set up Vitest with Next.js for Unit Testing. - [Third Party Libraries](https://nextjs.org/docs/app/guides/third-party-libraries): Optimize the performance of third-party libraries in your application with the `@next/third-parties` package. - [Upgrading](https://nextjs.org/docs/app/guides/upgrading): Learn how to upgrade to the latest versions of Next.js. - [Codemods](https://nextjs.org/docs/app/guides/upgrading/codemods): Use codemods to upgrade your Next.js codebase when new features are released. - [Version 14](https://nextjs.org/docs/app/guides/upgrading/version-14): Upgrade your Next.js Application from Version 13 to 14. - [Version 15](https://nextjs.org/docs/app/guides/upgrading/version-15): Upgrade your Next.js Application from Version 14 to 15. - [Version 16](https://nextjs.org/docs/app/guides/upgrading/version-16): Upgrade your Next.js Application from Version 15 to 16. - [Videos](https://nextjs.org/docs/app/guides/videos): Recommendations and best practices for optimizing videos in your Next.js application. - [View transitions](https://nextjs.org/docs/app/guides/view-transitions): Learn how to use view transitions to communicate meaning during navigation, loading, and content changes in a Next.js app. - [API Reference](https://nextjs.org/docs/app/api-reference): Next.js API Reference for the App Router. - [Directives](https://nextjs.org/docs/app/api-reference/directives): Directives are used to modify the behavior of your Next.js application. - [use cache](https://nextjs.org/docs/app/api-reference/directives/use-cache): Learn how to use the "use cache" directive to cache data in your Next.js application. - [use cache: private](https://nextjs.org/docs/app/api-reference/directives/use-cache-private): Learn how to use the "use cache: private" directive to cache functions that access runtime request APIs. - [use cache: remote](https://nextjs.org/docs/app/api-reference/directives/use-cache-remote): Learn how to use the "use cache: remote" directive for persistent, shared caching using remote cache handlers. - [use client](https://nextjs.org/docs/app/api-reference/directives/use-client): Learn how to use the use client directive to render a component on the client. - [use server](https://nextjs.org/docs/app/api-reference/directives/use-server): Learn how to use the use server directive to execute code on the server. - [Components](https://nextjs.org/docs/app/api-reference/components): API Reference for Next.js built-in components. - [Font](https://nextjs.org/docs/app/api-reference/components/font): Optimizing loading web fonts with the built-in `next/font` loaders. - [Form Component](https://nextjs.org/docs/app/api-reference/components/form): Learn how to use the `