Next.js · Latest
Document List
app
App Router
The App Router is a file-system based router that uses React's latest features such as Server Components, Suspense, Server Functions, and more.
API Reference
Next.js API Reference for the App Router.
CLI
API Reference for the Next.js Command Line Interface (CLI) tools.
create-next-app
Create Next.js apps using one command with the create-next-app CLI.
next CLI
Learn how to run and build your application with the Next.js CLI.
Components
API Reference for Next.js built-in components.
Font Module
Optimizing loading web fonts with the built-in `next/font` loaders.
Form Component
Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation.
Image Component
Optimize Images in your Next.js Application using the built-in `next/image` Component.
Link Component
Enable fast client-side navigation with the built-in `next/link` component.
Script Component
Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.
Configuration
Learn how to configure Next.js applications.
ESLint Plugin
Learn how to use and configure the ESLint plugin to catch common issues and problems in a Next.js application.
next.config.js
Learn how to configure your application with next.config.js.
experimental.adapterPath
Configure a custom adapter for Next.js to hook into the build process with modifyConfig and onBuildComplete callbacks.
allowedDevOrigins
Use `allowedDevOrigins` to configure additional origins that can request the dev server.
appDir
Enable the App Router to use layouts, streaming, and more.
assetPrefix
Learn how to use the assetPrefix config option to configure your CDN.
authInterrupts
Learn how to enable the experimental `authInterrupts` configuration option to use `forbidden` and `unauthorized`.
basePath
Use `basePath` to deploy a Next.js application under a sub-path of a domain.
browserDebugInfoInTerminal
Forward browser console logs and errors to your terminal during development.
cacheComponents
Learn how to enable the cacheComponents flag in Next.js.
cacheHandlers
Configure custom cache handlers for use cache directives in Next.js.
cacheLife
Learn how to set up cacheLife configurations in Next.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.
crossOrigin
Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script`.
cssChunking
Use the `cssChunking` option to control how CSS files are chunked in your Next.js application.
devIndicators
Configuration options for the on-screen indicator that gives context about the current route you're viewing during development.
distDir
Set a custom build directory to use instead of the default .next directory.
env
Learn to add and access environment variables in your Next.js application at build time.
expireTime
Customize stale-while-revalidate expire time for ISR enabled pages.
exportPathMap
Customize the pages that will be exported as HTML files when using `next export`.
generateBuildId
Configure the build id, which is used to identify the current build in which your application is being served.
generateEtags
Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.
headers
Add custom HTTP headers to your Next.js app.
htmlLimitedBots
Specify a list of user agents that should receive blocking metadata.
httpAgentOptions
Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.
images
Custom configuration for the next/image loader
Custom Next.js Cache Handler
Configure the Next.js cache used for storing and revalidating data to use any external service like Redis, Memcached, or others.
inlineCss
Enable inline CSS support.
isolatedDevBuild
Use isolated build outputs for development server to prevent conflicts with production builds.
logging
Configure how data fetches are logged to the console when running Next.js in development mode.
mdxRs
Use the new Rust compiler to compile MDX files in the App Router.
onDemandEntries
Configure how Next.js will dispose and keep in memory pages created in development.
optimizePackageImports
API Reference for optimizePackageImports Next.js Config Option
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
Extend the default page extensions used by Next.js when resolving pages in the Pages Router.
poweredByHeader
Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.
productionBrowserSourceMaps
Enables browser source map generation during the production build.
proxyClientMaxBodySize
Configure the maximum request body size when using proxy.
reactCompiler
Enable the React Compiler to automatically optimize component rendering.
reactMaxHeadersLength
The maximum length of the headers that are emitted by React and added to the response.
reactStrictMode
The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in
redirects
Add redirects to your Next.js app.
rewrites
Add rewrites to your Next.js app.
sassOptions
Configure Sass options.
serverActions
Configure Server Actions behavior in your Next.js application.
serverComponentsHmrCache
Configure whether fetch responses in Server Components are cached across HMR refresh requests.
serverExternalPackages
Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.
staleTimes
Learn how to override the invalidation time of the Client Router Cache.
staticGeneration*
Learn how to configure static generation in your Next.js application.
taint
Enable tainting Objects and Values.
trailingSlash
Configure Next.js pages to resolve with or without a trailing slash.
transpilePackages
Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).
turbopack
Configure Next.js with Turbopack-specific options
Turbopack FileSystem Caching
Learn how to enable FileSystem Caching for Turbopack builds
typedRoutes
Enable support for statically typed links.
typescript
Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.
urlImports
Configure Next.js to allow importing modules from external URLs.
useLightningcss
Enable experimental support for Lightning CSS.
viewTransition
Enable ViewTransition API from React in App Router
Custom Webpack Config
Learn how to customize the webpack config used by Next.js
webVitalsAttribution
Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.
TypeScript
Next.js provides a TypeScript-first development experience for building your React application.
Directives
Directives are used to modify the behavior of your Next.js application.
use cache
Learn how to use the use cache directive to cache data in your Next.js application.
use cache: private
Learn how to use the `"use cache: private"` directive to enable runtime prefetching of personalized content in your Next.js application.
use cache: remote
Learn how to use the `"use cache: remote"` directive to enable caching in dynamic contexts in your Next.js application.
use client
Learn how to use the use client directive to render a component on the client.
use server
Learn how to use the use server directive to execute code on the server.
Edge Runtime
API Reference for the Edge Runtime.
File-system conventions
API Reference for Next.js file-system conventions.
default.js
API Reference for the default.js file.
Dynamic Route Segments
Dynamic Route Segments can be used to programmatically generate route segments from dynamic data.
error.js
API reference for the error.js special file.
forbidden.js
API reference for the forbidden.js special file.
instrumentation.js
API reference for the instrumentation.js file.
instrumentation-client.js
Learn how to add client-side instrumentation to track and monitor your Next.js application's frontend performance.
Intercepting Routes
Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.
layout.js
API reference for the layout.js file.
loading.js
API reference for the loading.js file.
mdx-components.js
API reference for the mdx-components.js file.
Metadata Files API Reference
API documentation for the metadata file conventions.
favicon, icon, and apple-icon
API Reference for the Favicon, Icon and Apple Icon file conventions.
manifest.json
API Reference for manifest.json file.
opengraph-image and twitter-image
API Reference for the Open Graph Image and Twitter Image file conventions.
robots.txt
API Reference for robots.txt file.
sitemap.xml
API Reference for the sitemap.xml file.
not-found.js
API reference for the not-found.js file.
page.js
API reference for the page.js file.
Parallel Routes
Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.
proxy.js
API reference for the proxy.js file.
public Folder
Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
route.js
API reference for the route.js special file.
Route Groups
Route Groups can be used to partition your Next.js application into different sections.
Route Segment Config
Learn about how to configure options for Next.js route segments.
src Folder
Save pages under the `src` folder as an alternative to the root `pages` directory.
template.js
API Reference for the template.js file.
unauthorized.js
API reference for the unauthorized.js special file.
Functions
API Reference for Next.js Functions and Hooks.
after
API Reference for the after function.
cacheLife
Learn how to use the cacheLife function to set the cache expiration time for a cached function or component.
cacheTag
Learn how to use the cacheTag function to manage cache invalidation in your Next.js application.
connection
API Reference for the connection function.
cookies
API Reference for the cookies function.
draftMode
API Reference for the draftMode function.
fetch
API reference for the extended fetch function.
forbidden
API Reference for the forbidden function.
generateImageMetadata
Learn how to generate multiple images in a single Metadata API special file.
generateMetadata
Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.
generateSitemaps
Learn how to use the generateSiteMaps function to create multiple sitemaps for your application.
generateStaticParams
API reference for the generateStaticParams function.
generateViewport
API Reference for the generateViewport function.
headers
API reference for the headers function.
ImageResponse
API Reference for the ImageResponse constructor.
NextRequest
API Reference for NextRequest.
NextResponse
API Reference for NextResponse.
notFound
API Reference for the notFound function.
permanentRedirect
API Reference for the permanentRedirect function.
redirect
API Reference for the redirect function.
refresh
API Reference for the refresh function.
revalidatePath
API Reference for the revalidatePath function.
revalidateTag
API Reference for the revalidateTag function.
unauthorized
API Reference for the unauthorized function.
unstable_cache
API Reference for the unstable_cache function.
unstable_noStore
API Reference for the unstable_noStore function.
unstable_rethrow
API Reference for the unstable_rethrow function.
updateTag
API Reference for the updateTag function.
useLinkStatus
API Reference for the useLinkStatus hook.
useParams
API Reference for the useParams hook.
usePathname
API Reference for the usePathname hook.
useReportWebVitals
API Reference for the useReportWebVitals function.
useRouter
API reference for the useRouter hook.
useSearchParams
API Reference for the useSearchParams hook.
useSelectedLayoutSegment
API Reference for the useSelectedLayoutSegment hook.
useSelectedLayoutSegments
API Reference for the useSelectedLayoutSegments hook.
userAgent
The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.
Turbopack
Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.
Getting Started
Learn how to create full-stack web applications with the Next.js App Router.
Cache Components
Learn how to use Cache Components and combine the benefits of static and dynamic rendering.
Caching and Revalidating
Learn how to cache and revalidate data in your application.
CSS
Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
Deploying
Learn how to deploy your Next.js application.
Error Handling
Learn how to display expected errors and handle uncaught exceptions.
Fetching Data
Learn how to fetch data and stream content that depends on data.
Font Optimization
Learn how to optimize fonts in Next.js
Image Optimization
Learn how to optimize images in Next.js
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.
Layouts and Pages
Learn how to create your first pages and layouts, and link between them with the Link component.
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.
Metadata and OG images
Learn how to add metadata to your pages and create dynamic OG images.
Project structure and organization
Learn the folder and file conventions in Next.js, and how to organize your project.
Proxy
Learn how to use Proxy
Route Handlers
Learn how to use Route Handlers
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.
Updating Data
Learn how to mutate data using Server Functions.
Upgrading
Learn how to upgrade your Next.js application to the latest version or canary.
Guides
Learn how to implement common patterns and real-world use cases using Next.js
How to add analytics to your Next.js application
Measure and track page performance using Next.js Speed Insights
How to implement authentication in Next.js
Learn how to implement authentication in your Next.js application.
How to use Next.js as a backend for your frontend
Learn how to use Next.js as a backend framework
Caching in Next.js
An overview of caching mechanisms in Next.js.
How to configure Continuous Integration (CI) build caching
Learn how to configure CI to cache Next.js builds
How to set a Content Security Policy (CSP) for your Next.js application
Learn how to set a Content Security Policy (CSP) for your Next.js application.
How to use CSS-in-JS libraries
Use CSS-in-JS libraries with Next.js
How to set up a custom server in Next.js
Start a Next.js app programmatically using a custom server.
How to think about data security in Next.js
Learn the built-in data security features in Next.js and learn best practices for protecting your application's data.
How to use debugging tools with Next.js
Learn how to debug your Next.js application with VS Code, Chrome DevTools, or Firefox DevTools.
How to preview content with Draft Mode in Next.js
Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here.
How to use environment variables in Next.js
Learn to add and access environment variables in your Next.js application.
How to create forms with Server Actions
Learn how to create forms in Next.js with React Server Actions.
How to implement Incremental Static Regeneration (ISR)
Learn how to create or update static pages at runtime with Incremental Static Regeneration.
How to set up instrumentation
Learn how to use instrumentation to run code at server startup in your Next.js app
Internationalization
Add support for multiple languages with internationalized routing and localized content.
How to implement JSON-LD in your Next.js application
Learn how to add JSON-LD to your Next.js application to describe your content to search engines and AI.
How to lazy load Client Components and libraries
Lazy load imported libraries and React Components to improve your application's loading performance.
How to optimize your local development environment
Learn how to optimize your local development environment with Next.js.
Enabling Next.js MCP Server for Coding Agents
Learn how to use Next.js MCP support to allow coding agents access to your application state
How to use markdown and MDX in Next.js
Learn how to configure MDX and use it in your Next.js apps.
How to optimize memory usage
Optimize memory used by your application in development and production.
Migrating
Learn how to migrate from popular frameworks to Next.js
How to migrate from Pages to the App Router
Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
How to migrate from Create React App to Next.js
Learn how to migrate your existing React application from Create React App to Next.js.
How to migrate from Vite to Next.js
Learn how to migrate your existing React application from Vite to Next.js.
How to build multi-tenant apps in Next.js
Learn how to build multi-tenant apps with the App Router.
How to build micro-frontends using multi-zones and Next.js
Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.
How to set up instrumentation with OpenTelemetry
Learn how to instrument your Next.js app with OpenTelemetry.
How to optimize package bundling
Learn how to optimize your application's server and client bundles.
Prefetching
Learn how to configure prefetching in Next.js
How to optimize your Next.js application for production
Recommendations to ensure the best performance and user experience before taking your Next.js application to production.
How to build a Progressive Web Application (PWA) with Next.js
Learn how to build a Progressive Web Application (PWA) with Next.js.
How to handle redirects in Next.js
Learn the different ways to handle redirects in Next.js.
How to use Sass
Style your Next.js application using Sass.
How to load and optimize scripts
Optimize 3rd party scripts with the built-in Script component.
How to self-host your Next.js application
Learn how to self-host your Next.js application on a Node.js server, Docker image, or static HTML files (static exports).
How to build single-page applications with Next.js
Next.js fully supports building Single-Page Applications (SPAs).
How to create a static export of your Next.js application
Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.
How to install Tailwind CSS v3 in your Next.js application
Style your Next.js Application using Tailwind CSS v3 for broader browser support.
Testing
Learn how to set up Next.js with four commonly used testing tools — Cypress, Playwright, Vitest, and Jest.
How to set up Cypress with Next.js
Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.
How to set up Jest with Next.js
Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.
How to set up Playwright with Next.js
Learn how to set up Playwright with Next.js for End-to-End (E2E) Testing.
How to set up Vitest with Next.js
Learn how to set up Vitest with Next.js for Unit Testing.
How to optimize third-party libraries
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
Upgrade Guides
Learn how to upgrade to the latest versions of Next.js.
Codemods
Use codemods to upgrade your Next.js codebase when new features are released.
How to upgrade to version 14
Upgrade your Next.js Application from Version 13 to 14.
How to upgrade to version 15
Upgrade your Next.js Application from Version 14 to 15.
How to upgrade to version 16
Upgrade your Next.js Application from Version 15 to 16.
How to use and optimize videos
Recommendations and best practices for optimizing videos in your Next.js application.
architecture
Architecture
How Next.js Works
Accessibility
The built-in accessibility features of Next.js.
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
Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.
Supported Browsers
Browser support and which JavaScript features are supported by Next.js.
community
pages
Pages Router
Before Next.js 13, the Pages Router was the main way to create routes in Next.js with an intuitive file-system router.
API Reference
Next.js API Reference for the Pages Router.
CLI
API Reference for the Next.js Command Line Interface (CLI) tools.
create-next-app CLI
Create Next.js apps using one command with the create-next-app CLI.
next CLI
Learn how to run and build your application with the Next.js CLI.
Components
API Reference for Next.js built-in components in the Pages Router.
Font Module
API Reference for the Font Module
Form
Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation.
Head
Add custom elements to the `head` of your page with the built-in Head component.
Image
Optimize Images in your Next.js Application using the built-in `next/image` Component.
Image (Legacy)
Backwards compatible Image Optimization with the Legacy Image component.
Link
API reference for the `<Link>` component.
Script
Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.
Configuration
Learn how to configure your Next.js application.
ESLint
Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.
next.config.js Options
Learn about the options available in next.config.js for the Pages Router.
experimental.adapterPath
Configure a custom adapter for Next.js to hook into the build process with modifyConfig and buildComplete callbacks.
allowedDevOrigins
Use `allowedDevOrigins` to configure additional origins that can request the dev server.
assetPrefix
Learn how to use the assetPrefix config option to configure your CDN.
basePath
Use `basePath` to deploy a Next.js application under a sub-path of a domain.
bundlePagesRouterDependencies
Enable automatic dependency bundling for Pages Router
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.
crossOrigin
Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script` and `next/head`.
devIndicators
Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.
distDir
Set a custom build directory to use instead of the default .next directory.
env
Learn to add and access environment variables in your Next.js application at build time.
exportPathMap
Customize the pages that will be exported as HTML files when using `next export`.
generateBuildId
Configure the build id, which is used to identify the current build in which your application is being served.
generateEtags
Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.
headers
Add custom HTTP headers to your Next.js app.
httpAgentOptions
Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.
images
Custom configuration for the next/image loader
isolatedDevBuild
Use isolated directories for development builds to prevent conflicts with production builds.
onDemandEntries
Configure how Next.js will dispose and keep in memory pages created in development.
optimizePackageImports
API Reference for optimizePackageImports Next.js Config Option
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
Extend the default page extensions used by Next.js when resolving pages in the Pages Router.
poweredByHeader
Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.
productionBrowserSourceMaps
Enables browser source map generation during the production build.
experimental.proxyClientMaxBodySize
Configure the maximum request body size when using proxy.
reactStrictMode
The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in
redirects
Add redirects to your Next.js app.
rewrites
Add rewrites to your Next.js app.
serverExternalPackages
Opt-out specific dependencies from the dependency bundling enabled by `bundlePagesRouterDependencies`.
trailingSlash
Configure Next.js pages to resolve with or without a trailing slash.
transpilePackages
Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).
turbopack
Configure Next.js with Turbopack-specific options
typescript
Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.
urlImports
Configure Next.js to allow importing modules from external URLs.
useLightningcss
Enable experimental support for Lightning CSS.
Custom Webpack Config
Learn how to customize the webpack config used by Next.js
webVitalsAttribution
Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.
TypeScript
Next.js provides a TypeScript-first development experience for building your React application.
Edge Runtime
API Reference for the Edge Runtime.
File-system conventions
API Reference for Next.js file-system conventions.
instrumentation.js
API reference for the instrumentation.js file.
Proxy
Learn how to use Proxy to run code before a request is completed.
public Folder
Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
src Directory
Save pages under the `src` folder as an alternative to the root `pages` directory.
Functions
API Reference for Functions and Hooks in Pages Router.
getInitialProps
Fetch dynamic data on the server for your React component with getInitialProps.
getServerSideProps
API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.
getStaticPaths
API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.
getStaticProps
API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.
NextRequest
API Reference for NextRequest.
NextResponse
API Reference for NextResponse.
useReportWebVitals
useReportWebVitals
useRouter
Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.
userAgent
The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.
Turbopack
Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.
Building Your Application
Learn how to use Next.js features to build your application.
Configuring
Learn how to configure your Next.js application.
Error Handling
Handle errors in your Next.js app.
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.
Client-side Fetching
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.
Forms and Mutations
Learn how to handle form submissions and data mutations with Next.js.
getServerSideProps
Fetch data on each request with `getServerSideProps`.
getStaticPaths
Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.
getStaticProps
Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.
Rendering
Learn the fundamentals of rendering in React and Next.js.
Automatic Static Optimization
Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.
Client-side Rendering (CSR)
Learn how to implement client-side rendering in the Pages Router.
Server-side Rendering (SSR)
Use Server-side Rendering to render pages on each request.
Static Site Generation (SSG)
Use Static Site Generation (SSG) to pre-render pages at build time.
Routing
Learn the fundamentals of routing for front-end applications with the Pages Router.
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.
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
Extend the default document markup added by Next.js.
Custom Errors
Override and extend the built-in Error page to handle custom errors.
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
Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.
Pages and Layouts
Create your first page and shared layout with the Pages Router.
Getting Started - Pages Router
Learn how to create full-stack web applications with Next.js with the Pages Router.
How to use CSS in your application
Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.
How to deploy your Next.js application
Learn how to deploy your Next.js application.
How to use fonts
Learn how to use fonts in Next.js
Image Optimization
Optimize your images with the built-in `next/image` component.
Create a new Next.js application
How to create a new Next.js application with `create-next-app`. Set up TypeScript, ESLint,and configure your `next.config.js` file.
Project Structure and Organization
Learn about the folder and file conventions in a Next.js project, and how to organize your project.
Guides
Learn how to implement common UI patterns and use cases using Next.js
How to set up analytics
Measure and track page performance using Next.js
How to implement authentication in Next.js
Learn how to implement authentication in Next.js, covering best practices, securing routes, authorization techniques, and session management.
How to configure Babel in Next.js
Extend the babel preset added by Next.js with your own configs.
How to configure Continuous Integration (CI) build caching
Learn how to configure CI to cache Next.js builds
How to set a Content Security Policy (CSP) for your Next.js application
Learn how to set a Content Security Policy (CSP) for your Next.js application.
How to use CSS-in-JS libraries
Use CSS-in-JS libraries with Next.js
How to set up a custom server in Next.js
Start a Next.js app programmatically using a custom server.
How to use debugging tools with Next.js
Learn how to debug your Next.js application with VS Code or Chrome DevTools.
How to preview content with Draft Mode in Next.js
Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.
How to use environment variables in Next.js
Learn to add and access environment variables in your Next.js application.
How to create forms with API Routes
Learn how to handle form submissions and data mutations with Next.js.
How to implement Incremental Static Regeneration (ISR)
Learn how to create or update static pages at runtime with Incremental Static Regeneration.
How to set up instrumentation
Learn how to use instrumentation to run code at server startup in your Next.js app
How to implement internationalization in Next.js
Next.js has built-in support for internationalized routing and language detection. Learn more here.
How to lazy load Client Components and libraries
Lazy load imported libraries and React Components to improve your application's overall loading performance.
How to use markdown and MDX in Next.js
Learn how to configure MDX to write JSX in your markdown files.
Migrating
Learn how to migrate from popular frameworks to Next.js
How to migrate from Pages to the App Router
Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
How to migrate from Create React App to Next.js
Learn how to migrate your existing React application from Create React App to Next.js.
How to migrate from Vite to Next.js
Learn how to migrate your existing React application from Vite to Next.js.
How to build micro-frontends using multi-zones and Next.js
Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.
How to instrument your Next.js app with OpenTelemetry
Learn how to instrument your Next.js app with OpenTelemetry.
How to optimize package bundling
Learn how to optimize your application's server and client bundles.
How to configure PostCSS in Next.js
Extend the PostCSS config and plugins added by Next.js with your own.
How to preview content with Preview Mode in Next.js
Next.js has the preview mode for statically generated pages. You can learn how it works here.
How to optimize your Next.js application for production
Recommendations to ensure the best performance and user experience before taking your Next.js application to production.
How to handle redirects in Next.js
Learn the different ways to handle redirects in Next.js.
How to use Sass in Next.js
Learn how to use Sass in your Next.js application.
How to load and optimize scripts
Optimize 3rd party scripts with the built-in Script component.
How to self-host your Next.js application
Learn how to self-host your Next.js application on a Node.js server, Docker image, or static HTML files (static exports).
How to create a static export of your Next.js application
Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.
Tailwind CSS
Style your Next.js Application using Tailwind CSS.
Testing
Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Vitest, and Jest.
How to set up Cypress with Next.js
Learn how to set up Next.js with Cypress for End-to-End (E2E) and Component Testing.
How to set up Jest with Next.js
Learn how to set up Next.js with Jest for Unit Testing.
How to set up Playwright with Next.js
Learn how to set up Next.js with Playwright for End-to-End (E2E) and Integration testing.
How to set up Vitest with Next.js
Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.
How to optimize third-party libraries
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
Upgrading
Learn how to upgrade to the latest versions of Next.js.
Codemods
Use codemods to upgrade your Next.js codebase when new features are released.
How to upgrade to version 10
Upgrade your Next.js Application from Version 9 to Version 10.
How to upgrade to version 11
Upgrade your Next.js Application from Version 10 to Version 11.
How to upgrade to version 12
Upgrade your Next.js Application from Version 11 to Version 12.
How to upgrade to version 13
Upgrade your Next.js Application from Version 12 to 13.
How to upgrade to version 14
Upgrade your Next.js Application from Version 13 to 14.
How to upgrade to version 9
Upgrade your Next.js Application from Version 8 to Version 9.