# Next.js 13 Documentation — Pages Router

> Reference and guides for Next.js v13.5.11 — the React framework for building full-stack web applications. Sections cover Getting Started, Pages Router, Architecture, and Community Resources.

@doc-version: v13.5.11

**Next.js 13 is outside of our support policy.**

Next.js 13 has reached end-of-life. We recommend upgrading to a supported version.

## Upgrade Guide

- [Upgrade Guide](https://nextjs.org/docs/app/guides/upgrading/version-14)
- [Codemods](https://nextjs.org/docs/app/guides/upgrading/codemods)

```bash
npx @next/codemod@latest upgrade
```

## Current Supported Versions

| Version | Status |
|---------|--------|
| 16.x | Active LTS |
| 15.x | Maintenance LTS |

---



## [Getting Started](https://nextjs.org/docs/13/getting-started)

Learn how to create full-stack web applications with Next.js.

- [Installation](https://nextjs.org/docs/13/getting-started/installation): Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.
- [Project Structure](https://nextjs.org/docs/13/getting-started/project-structure): A list of folders and files conventions in a Next.js project

## [Building Your Application](https://nextjs.org/docs/13/pages/building-your-application)

Learn how to use Next.js features to build your application.

- [Routing](https://nextjs.org/docs/13/pages/building-your-application/routing): Learn the fundamentals of routing for front-end applications with the Pages Router.
  - [Pages and Layouts](https://nextjs.org/docs/13/pages/building-your-application/routing/pages-and-layouts): Create your first page and shared layout with the Pages Router.
  - [Dynamic Routes](https://nextjs.org/docs/13/pages/building-your-application/routing/dynamic-routes): Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.
  - [Linking and Navigating](https://nextjs.org/docs/13/pages/building-your-application/routing/linking-and-navigating): Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.
  - [Custom App](https://nextjs.org/docs/13/pages/building-your-application/routing/custom-app): Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.
  - [Custom Document](https://nextjs.org/docs/13/pages/building-your-application/routing/custom-document): Extend the default document markup added by Next.js.
  - [Custom Errors](https://nextjs.org/docs/13/pages/building-your-application/routing/custom-error): Override and extend the built-in Error page to handle custom errors.
  - [API Routes](https://nextjs.org/docs/13/pages/building-your-application/routing/api-routes): Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.
  - [Internationalization](https://nextjs.org/docs/13/pages/building-your-application/routing/internationalization): Next.js has built-in support for internationalized routing and language detection. Learn more here.
  - [Authenticating](https://nextjs.org/docs/13/pages/building-your-application/routing/authenticating): Learn about authentication patterns in Next.js apps and explore a few examples.
  - [Middleware](https://nextjs.org/docs/13/pages/building-your-application/routing/middleware): Learn how to use Middleware to run code before a request is completed.
- [Rendering](https://nextjs.org/docs/13/pages/building-your-application/rendering): Learn the fundamentals of rendering in React and Next.js.
  - [Server-side Rendering (SSR)](https://nextjs.org/docs/13/pages/building-your-application/rendering/server-side-rendering): Use Server-side Rendering to render pages on each request.
  - [Static Site Generation (SSG)](https://nextjs.org/docs/13/pages/building-your-application/rendering/static-site-generation): Use Static Site Generation (SSG) to pre-render pages at build time.
  - [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/13/pages/building-your-application/rendering/incremental-static-regeneration): Learn how to create or update static pages at runtime with Incremental Static Regeneration.
  - [Automatic Static Optimization](https://nextjs.org/docs/13/pages/building-your-application/rendering/automatic-static-optimization): Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.
  - [Client-side Rendering (CSR)](https://nextjs.org/docs/13/pages/building-your-application/rendering/client-side-rendering): Learn how to implement client-side rendering in the Pages Router.
  - [Edge and Node.js Runtimes](https://nextjs.org/docs/13/pages/building-your-application/rendering/edge-and-nodejs-runtimes): Learn more about the switchable runtimes (Edge and Node.js) in Next.js.
- [Data Fetching](https://nextjs.org/docs/13/pages/building-your-application/data-fetching): Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.
  - [getStaticProps](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/get-static-props): Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.
  - [getStaticPaths](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/get-static-paths): Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.
  - [Forms and Mutations](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/forms-and-mutations): Learn how to handle form submissions and data mutations with Next.js.
  - [getServerSideProps](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/get-server-side-props): Fetch data on each request with `getServerSideProps`.
  - [Incremental Static Regeneration](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/incremental-static-regeneration): Learn how to create or update static pages at runtime with Incremental Static Regeneration.
  - [Client-side Fetching](https://nextjs.org/docs/13/pages/building-your-application/data-fetching/client-side): Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.
- [Styling](https://nextjs.org/docs/13/pages/building-your-application/styling): Learn the different ways you can style your Next.js application.
  - [CSS Modules](https://nextjs.org/docs/13/pages/building-your-application/styling/css-modules): Style your Next.js Application using CSS Modules.
  - [Tailwind CSS](https://nextjs.org/docs/13/pages/building-your-application/styling/tailwind-css): Style your Next.js Application using Tailwind CSS.
  - [CSS-in-JS](https://nextjs.org/docs/13/pages/building-your-application/styling/css-in-js): Use CSS-in-JS libraries with Next.js
  - [Sass](https://nextjs.org/docs/13/pages/building-your-application/styling/sass): Learn how to use Sass in your Next.js application.
- [Optimizing](https://nextjs.org/docs/13/pages/building-your-application/optimizing): Optimize your Next.js application for best performance and user experience.
  - [Images](https://nextjs.org/docs/13/pages/building-your-application/optimizing/images): Optimize your images with the built-in `next/image` component.
  - [Fonts](https://nextjs.org/docs/13/pages/building-your-application/optimizing/fonts): Optimize your application's web fonts with the built-in `next/font` loaders.
  - [Scripts](https://nextjs.org/docs/13/pages/building-your-application/optimizing/scripts): Optimize 3rd party scripts with the built-in Script component.
  - [Static Assets](https://nextjs.org/docs/13/pages/building-your-application/optimizing/static-assets): Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
  - [Lazy Loading](https://nextjs.org/docs/13/pages/building-your-application/optimizing/lazy-loading): Lazy load imported libraries and React Components to improve your application's loading performance.
  - [Analytics](https://nextjs.org/docs/13/pages/building-your-application/optimizing/analytics): Measure and track page performance using Next.js Speed Insights
  - [OpenTelemetry](https://nextjs.org/docs/13/pages/building-your-application/optimizing/open-telemetry): Learn how to instrument your Next.js app with OpenTelemetry.
  - [Instrumentation](https://nextjs.org/docs/13/pages/building-your-application/optimizing/instrumentation): Learn how to use instrumentation to run code at server startup in your Next.js app
  - [Testing](https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing): Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.
- [Configuring](https://nextjs.org/docs/13/pages/building-your-application/configuring): Learn how to configure your Next.js application.
  - [TypeScript](https://nextjs.org/docs/13/pages/building-your-application/configuring/typescript): Next.js provides a TypeScript-first development experience for building your React application.
  - [ESLint](https://nextjs.org/docs/13/pages/building-your-application/configuring/eslint): Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.
  - [Environment Variables](https://nextjs.org/docs/13/pages/building-your-application/configuring/environment-variables): Learn to add and access environment variables in your Next.js application.
  - [Absolute Imports and Module Path Aliases](https://nextjs.org/docs/13/pages/building-your-application/configuring/absolute-imports-and-module-aliases): Configure module path aliases that allow you to remap certain import paths.
  - [src Directory](https://nextjs.org/docs/13/pages/building-your-application/configuring/src-directory): Save pages under the `src` directory as an alternative to the root `pages` directory.
  - [MDX](https://nextjs.org/docs/13/pages/building-your-application/configuring/mdx): Learn how to configure MDX to write JSX in your markdown files.
  - [AMP](https://nextjs.org/docs/13/pages/building-your-application/configuring/amp): With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages.
  - [Babel](https://nextjs.org/docs/13/pages/building-your-application/configuring/babel): Extend the babel preset added by Next.js with your own configs.
  - [PostCSS](https://nextjs.org/docs/13/pages/building-your-application/configuring/post-css): Extend the PostCSS config and plugins added by Next.js with your own.
  - [Custom Server](https://nextjs.org/docs/13/pages/building-your-application/configuring/custom-server): Start a Next.js app programmatically using a custom server.
  - [Draft Mode](https://nextjs.org/docs/13/pages/building-your-application/configuring/draft-mode): Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.
  - [Error Handling](https://nextjs.org/docs/13/pages/building-your-application/configuring/error-handling): Handle errors in your Next.js app.
  - [Debugging](https://nextjs.org/docs/13/pages/building-your-application/configuring/debugging): Learn how to debug your Next.js application with VS Code or Chrome DevTools.
  - [Preview Mode](https://nextjs.org/docs/13/pages/building-your-application/configuring/preview-mode): Next.js has the preview mode for statically generated pages. You can learn how it works here.
  - [Content Security Policy](https://nextjs.org/docs/13/pages/building-your-application/configuring/content-security-policy): Learn how to set a Content Security Policy (CSP) for your Next.js application.
- [Deploying](https://nextjs.org/docs/13/pages/building-your-application/deploying): Learn how to deploy your Next.js app to production, either managed or self-hosted.
  - [Going to Production](https://nextjs.org/docs/13/pages/building-your-application/deploying/production-checklist): Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
  - [Static Exports](https://nextjs.org/docs/13/pages/building-your-application/deploying/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.
  - [Multi Zones](https://nextjs.org/docs/13/pages/building-your-application/deploying/multi-zones): Learn how to use multi zones to deploy multiple Next.js apps as a single app.
  - [Continuous Integration (CI) Build Caching](https://nextjs.org/docs/13/pages/building-your-application/deploying/ci-build-caching): Learn how to configure CI to cache Next.js builds
- [Upgrading](https://nextjs.org/docs/13/pages/building-your-application/upgrading): Learn how to upgrade to the latest versions of Next.js.
  - [Codemods](https://nextjs.org/docs/13/pages/building-your-application/upgrading/codemods): Use codemods to upgrade your Next.js codebase when new features are released.
  - [From Pages to App](https://nextjs.org/docs/13/pages/building-your-application/upgrading/app-router-migration): Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
  - [Version 13](https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-13): Upgrade your Next.js Application from Version 12 to 13.
  - [Version 12](https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-12): Upgrade your Next.js Application from Version 11 to Version 12.
  - [Version 11](https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-11): Upgrade your Next.js Application from Version 10 to Version 11.
  - [Version 10](https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-10): Upgrade your Next.js Application from Version 9 to Version 10.
  - [Version 9](https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-9): Upgrade your Next.js Application from Version 8 to Version 9.

## [API Reference](https://nextjs.org/docs/13/pages/api-reference)

Next.js API Reference for the Pages Router.

- [Components](https://nextjs.org/docs/13/pages/api-reference/components): API Reference for Next.js built-in components in the Pages Router.
  - [Font](https://nextjs.org/docs/13/pages/api-reference/components/font): API Reference for the Font Module
  - [<Head>](https://nextjs.org/docs/13/pages/api-reference/components/head): Add custom elements to the `head` of your page with the built-in Head component.
  - [<Image>](https://nextjs.org/docs/13/pages/api-reference/components/image): Optimize Images in your Next.js Application using the built-in `next/image` Component.
  - [<Image> (Legacy)](https://nextjs.org/docs/13/pages/api-reference/components/image-legacy): Backwards compatible Image Optimization with the Legacy Image component.
  - [<Link>](https://nextjs.org/docs/13/pages/api-reference/components/link): API reference for the <Link> component.
  - [<Script>](https://nextjs.org/docs/13/pages/api-reference/components/script): Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.
- [Functions](https://nextjs.org/docs/13/pages/api-reference/functions): API Reference for Functions and Hooks in Pages Router.
  - [getInitialProps](https://nextjs.org/docs/13/pages/api-reference/functions/get-initial-props): Fetch dynamic data on the server for your React component with getInitialProps.
  - [getServerSideProps](https://nextjs.org/docs/13/pages/api-reference/functions/get-server-side-props): API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.
  - [getStaticPaths](https://nextjs.org/docs/13/pages/api-reference/functions/get-static-paths): API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.
  - [getStaticProps](https://nextjs.org/docs/13/pages/api-reference/functions/get-static-props): API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.
  - [NextRequest and NextResponse](https://nextjs.org/docs/13/pages/api-reference/functions/next-server): Learn about the server-only helpers for Middleware and Edge API Routes.
  - [useAmp](https://nextjs.org/docs/13/pages/api-reference/functions/use-amp): Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.
  - [useReportWebVitals](https://nextjs.org/docs/13/pages/api-reference/functions/use-report-web-vitals): useReportWebVitals
  - [useRouter](https://nextjs.org/docs/13/pages/api-reference/functions/use-router): Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.
- [next.config.js Options](https://nextjs.org/docs/13/pages/api-reference/next-config-js): Learn about the options available in next.config.js for the Pages Router.
  - [assetPrefix](https://nextjs.org/docs/13/pages/api-reference/next-config-js/assetPrefix): Learn how to use the assetPrefix config option to configure your CDN.
  - [basePath](https://nextjs.org/docs/13/pages/api-reference/next-config-js/basePath): Use `basePath` to deploy a Next.js application under a sub-path of a domain.
  - [compress](https://nextjs.org/docs/13/pages/api-reference/next-config-js/compress): Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.
  - [devIndicators](https://nextjs.org/docs/13/pages/api-reference/next-config-js/devIndicators): Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.
  - [distDir](https://nextjs.org/docs/13/pages/api-reference/next-config-js/distDir): Set a custom build directory to use instead of the default .next directory.
  - [env](https://nextjs.org/docs/13/pages/api-reference/next-config-js/env): Learn to add and access environment variables in your Next.js application at build time.
  - [eslint](https://nextjs.org/docs/13/pages/api-reference/next-config-js/eslint): Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.
  - [exportPathMap](https://nextjs.org/docs/13/pages/api-reference/next-config-js/exportPathMap): Customize the pages that will be exported as HTML files when using `next export`.
  - [generateBuildId](https://nextjs.org/docs/13/pages/api-reference/next-config-js/generateBuildId): Configure the build id, which is used to identify the current build in which your application is being served.
  - [generateEtags](https://nextjs.org/docs/13/pages/api-reference/next-config-js/generateEtags): Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.
  - [headers](https://nextjs.org/docs/13/pages/api-reference/next-config-js/headers): Add custom HTTP headers to your Next.js app.
  - [httpAgentOptions](https://nextjs.org/docs/13/pages/api-reference/next-config-js/httpAgentOptions): Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.
  - [images](https://nextjs.org/docs/13/pages/api-reference/next-config-js/images): Custom configuration for the next/image loader
  - [onDemandEntries](https://nextjs.org/docs/13/pages/api-reference/next-config-js/onDemandEntries): Configure how Next.js will dispose and keep in memory pages created in development.
  - [output](https://nextjs.org/docs/13/pages/api-reference/next-config-js/output): Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.
  - [pageExtensions](https://nextjs.org/docs/13/pages/api-reference/next-config-js/pageExtensions): Extend the default page extensions used by Next.js when resolving pages in the Pages Router.
  - [poweredByHeader](https://nextjs.org/docs/13/pages/api-reference/next-config-js/poweredByHeader): Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.
  - [productionBrowserSourceMaps](https://nextjs.org/docs/13/pages/api-reference/next-config-js/productionBrowserSourceMaps): Enables browser source map generation during the production build.
  - [reactStrictMode](https://nextjs.org/docs/13/pages/api-reference/next-config-js/reactStrictMode): The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in
  - [redirects](https://nextjs.org/docs/13/pages/api-reference/next-config-js/redirects): Add redirects to your Next.js app.
  - [rewrites](https://nextjs.org/docs/13/pages/api-reference/next-config-js/rewrites): Add rewrites to your Next.js app.
  - [Runtime Config](https://nextjs.org/docs/13/pages/api-reference/next-config-js/runtime-configuration): Add client and server runtime configuration to your Next.js app.
  - [trailingSlash](https://nextjs.org/docs/13/pages/api-reference/next-config-js/trailingSlash): Configure Next.js pages to resolve with or without a trailing slash.
  - [transpilePackages](https://nextjs.org/docs/13/pages/api-reference/next-config-js/transpilePackages): Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).
  - [turbo](https://nextjs.org/docs/13/pages/api-reference/next-config-js/turbo): Configure Next.js with Turbopack-specific options
  - [typescript](https://nextjs.org/docs/13/pages/api-reference/next-config-js/typescript): Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.
  - [urlImports](https://nextjs.org/docs/13/pages/api-reference/next-config-js/urlImports): Configure Next.js to allow importing modules from external URLs (experimental).
  - [webpack](https://nextjs.org/docs/13/pages/api-reference/next-config-js/webpack): Learn how to customize the webpack config used by Next.js
  - [webVitalsAttribution](https://nextjs.org/docs/13/pages/api-reference/next-config-js/webVitalsAttribution): Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.
- [create-next-app](https://nextjs.org/docs/13/pages/api-reference/create-next-app): create-next-app
- [Next.js CLI](https://nextjs.org/docs/13/pages/api-reference/next-cli): Next.js CLI
- [Edge Runtime](https://nextjs.org/docs/13/pages/api-reference/edge): API Reference for the Edge Runtime.

## [Architecture](https://nextjs.org/docs/13/architecture)

How Next.js Works

- [Accessibility](https://nextjs.org/docs/13/architecture/accessibility): The built-in accessibility features of Next.js.
- [Fast Refresh](https://nextjs.org/docs/13/architecture/fast-refresh): Fast Refresh is a hot module reloading experience that gives you instantaneous feedback on edits made to your React components.
- [Next.js Compiler](https://nextjs.org/docs/13/architecture/nextjs-compiler): Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.
- [Supported Browsers](https://nextjs.org/docs/13/architecture/supported-browsers): Browser support and which JavaScript features are supported by Next.js.
- [Turbopack](https://nextjs.org/docs/13/architecture/turbopack): Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.

## [Community](https://nextjs.org/docs/13/community)

Get involved in the Next.js community.

- [Contribution Guide](https://nextjs.org/docs/13/community/contribution-guide): Learn how to contribute to Next.js Documentation