API reference

Next.js 16+ API reference

Next.js App Router and full-stack patterns

Identifiers: 118
With full guides: 98
Types: 10

Topics covered

App Router routing
Server vs Client Components
Server Actions
Caching & revalidation
Route Handlers
Middleware
Streaming & Suspense
Metadata & SEO

Class

Name	What it does
`NextRequest`	NextRequest extends the Web Request API with Next.js conveniences for incoming requests. Its cookies API handles request cookies, while nextUrl provides an extended parsed URL.
`NextResponse`	NextResponse extends the Web Response API with convenient helpers for JSON responses, redirects, rewrites, continued Proxy routing, and response cookies. It can be returned from Route Handlers or Proxy wherever a standard Response is accepted.
`ImageResponse`	ImageResponse generates dynamic images from JSX and CSS in Next.js App Router applications. It is useful for Open Graph images, Twitter cards, and other request-time image endpoints.
`NextFetchEvent`	NextFetchEvent is the second argument passed to a Next.js Proxy function. Its waitUntil() method keeps the invocation alive for background work such as logging or analytics.
`ReadonlyURLSearchParams`	ReadonlyURLSearchParams is the read-only query-string interface returned by Next.js useSearchParams. It lets Client Components inspect the current URL without directly mutating its search parameters.

Component

Name	What it does
`Image`	Next.js Image is an optimized extension of HTML img for App Router applications. It supports local assets and configured remote URLs, with responsive optimization controlled by component props and next.config.js.
`Link`	Link is the primary Next.js component for navigating between application routes. It extends an HTML anchor with client-side navigation and route prefetching.
`Script`	The Next.js `Script` component optimizes third-party JavaScript and lets you control when it is fetched and executed. Use `strategy` to balance startup performance against script availability.
`Form`	Next.js's Form component enhances HTML forms with prefetching, client-side navigation, and progressive enhancement. A string action navigates with GET-style URL search parameters; a function action invokes server-side form logic.
`Head`	`next/head` adds page-specific elements to the HTML head in the Pages Router. It is deprecated for App Router usage, where the built-in Metadata API replaces it.

Function

Name	What it does
`redirect`	redirect sends users to another URL from supported App Router server contexts and during Client Component rendering. It ends the current control flow and has context-dependent browser-history and HTTP-status behavior.
`notFound`	The App Router's notFound function handles missing resources by throwing a framework 404 error. It stops rendering the current route segment and displays the nearest not-found UI.
`revalidatePath`	`revalidatePath` invalidates cached data on demand for a specified Next.js path. Use it in Server Functions or Route Handlers after mutations; dynamic route patterns require a page or layout type.
`revalidateTag`	Invalidates cached data associated with a tag using stale-while-revalidate behavior. In Next.js 16, pass a cacheLife profile such as `"max"` as the second argument.
`cookies`	`cookies` is an asynchronous Next.js function for reading incoming request cookies in Server Components and reading or writing outgoing cookies in Server Functions or Route Handlers. Await it to access the cookie store.
`headers`	headers() asynchronously reads incoming HTTP request headers in a Server Component. It returns a read-only Web Headers object and is a request-time API.
`generateStaticParams`	generateStaticParams supplies dynamic-segment values that Next.js uses to prerender routes during the build. It can target all known paths or only a selected subset.
`permanentRedirect`	permanentRedirect permanently sends users to another relative or absolute URL. It is available in App Router components and server APIs, normally producing a 308 redirect and stopping rendering immediately.
`after`	`after` schedules work after a response or prerender finishes. Use it for side effects such as logging and analytics that should not block the response.
`connection`	connection() makes rendering wait for a real incoming request before continuing. Use it when per-request output is needed but the component does not use request-time APIs such as cookies or headers.
`draftMode`	`draftMode` lets App Router code inspect or toggle Draft Mode for previewing unpublished CMS content. It is asynchronous and exposes `isEnabled`, `enable()`, and `disable()`.
`userAgent`	`userAgent` parses a request's user-agent data into bot, browser, device, engine, and operating-system details. It is imported from `next/server` and is commonly used with `NextRequest` in Proxy logic.
`generateMetadata`	generateMetadata dynamically defines route metadata in a Next.js App Router page or layout. Return a Metadata object, optionally using route data, fetched data, or resolved parent metadata.
`unstable_cache`	unstable_cache wraps an asynchronous operation so its result can be reused across requests. In Next.js 16, it has been replaced by the `use cache` directive for new code.
`generateImageMetadata`	Generates multiple image variants for one route segment, such as alternate icons or social images. Each returned variant requires an id that the image-generation function receives.
`generateViewport`	generateViewport dynamically defines a route's initial viewport configuration in a Next.js App Router page or layout. Return a Viewport object; use the static viewport export for settings that do not need dynamic computation.
`generateSitemaps`	generateSitemaps lets an App Router sitemap route produce multiple sitemap files. Return one object with an id for each partition, then use that id in the sitemap generator to create each file.
`unstable_noStore`	unstable_noStore() opts a component out of prerendering and caching. It is deprecated in favor of connection() and should mainly be retained for existing code.
`unstable_rethrow`	Re-throws internal Next.js exceptions from a catch block so framework control flow—such as notFound() or redirect()—is preserved. Use it only when a catch block may receive both framework and application errors.
`forbidden`	forbidden() stops a route segment with a 403 response when the current user is authenticated but lacks permission. Next.js renders the nearest forbidden UI and marks the response noindex.
`unauthorized`	unauthorized() interrupts rendering for an unauthenticated request and displays Next.js 401 handling. Enable experimental authInterrupts before using it; customize the displayed UI with unauthorized.js.
`cacheLife`	Function
`cacheTag`	cacheTag labels cached data for selective, on-demand invalidation. Use it in a 'use cache' scope, then invalidate its tags with updateTag or revalidateTag.
`unstable_after`	Function
`unstable_cacheLife`	`unstable_cacheLife` assigns a lifetime profile to cached functions or components used with `use cache`. It is deprecated in Next.js 16; use the stable `cacheLife` API instead.
`unstable_cacheTag`	Function
`localFont`	Function
`preload`	The `preload` prop on `next/image` causes a selected image to be preloaded by inserting a link in the document head. Use it mainly for an above-the-fold LCP or hero image.
`preconnect`	Preconnect is a resource hint that begins connecting to an origin before its resources are requested. In Next.js App Router client components, use `ReactDOM.preconnect` to emit the hint.

Hook

Name	What it does
`useRouter`	Hook
`usePathname`	Hook
`useSearchParams`	useSearchParams is a Next.js Client Component hook for reading the current URL query string. It returns a read-only URLSearchParams interface and should be used inside Suspense for prerendered routes.
`useParams`	useParams is a Client Component hook for reading dynamic route segments from the current App Router URL. It returns segment values as strings or string arrays, depending on the segment declaration.
`useSelectedLayoutSegment`	A Client Component hook that reads the active route segment one level below the layout where it is called. Use it for route-aware navigation and optionally target a named parallel-route slot.
`useReportWebVitals`	Reports Core Web Vitals through a callback so an application can send performance measurements to its analytics service. Use it in a Client Component and keep the callback reference stable.
`useSelectedLayoutSegments`	A Client Component hook for reading active route segments below the layout where it is called. It returns an array and can optionally inspect a named parallel-route slot.
`useServerInsertedHTML`	useServerInsertedHTML registers a server-rendering callback that emits collected HTML, commonly CSS-in-JS styles, before dependent content. Use it with a style registry in a Client Component.
`useLinkStatus`	useLinkStatus tracks whether a Next.js App Router Link navigation is pending. Use it in a descendant Client Component to render localized inline feedback during slower transitions.

Interface

Name	What it does
`Metadata`	The Metadata interface types the object used to configure a route's metadata in the Next.js App Router. Export it statically from a page or layout, or return it from generateMetadata for server-resolved dynamic metadata.
`NextConfig`	NextConfig is the TypeScript type for a Next.js configuration object. Export a root-level configuration module by default so Next.js can apply its server- and build-time options.
`ImageProps`	Interface
`MiddlewareConfig`	Interface
`RouteHandlerContext`	Interface

Type Alias

Name	What it does
`MetadataRoute`	MetadataRoute provides TypeScript types for Next.js App Router metadata file conventions. Use members such as Sitemap, Robots, and Manifest to type generated metadata results.
`Viewport`	`Viewport` is the TypeScript type for Next.js App Router viewport configuration. Use it to type a static `viewport` export or the result of `generateViewport`.
`NextPage`	Type Alias
`NextMiddleware`	Type Alias
`ResolvingMetadata`	ResolvingMetadata types the parent argument of generateMetadata. It provides a promise for metadata resolved by ancestor route segments, enabling a route to inspect and extend inherited metadata.
`ResolvingViewport`	Type Alias
`RedirectType`	RedirectType selects whether redirect replaces the current browser-history entry or pushes a new one. It is imported from next/navigation and supplied as redirect's second argument.
`ServerRuntime`	Type Alias
`PageProps`	PageProps is a global TypeScript helper that derives a page's params and searchParams types from a route literal. It supports type-safe App Router pages, including dynamic segments.
`LayoutProps`	`LayoutProps` is a globally available Next.js TypeScript helper for strongly typing App Router layouts. A route literal enables inference of `params`, `children`, and named parallel-route slots from the directory structure.
`RouteContext`	RouteContext is a globally available TypeScript helper for Route Handlers. It derives strongly typed params from a route-pattern literal such as '/users/[id]'.
`GetStaticProps`	GetStaticProps is the TypeScript type alias for a Pages Router function that supplies data for static page generation. It is a legacy Pages Router API; App Router applications use Server Components and App Router data-fetching APIs instead.
`GetServerSideProps`	Deprecated Pages Router function for fetching data and rendering a page on every request. In the App Router, use server-side data fetching with fetch and async React Server Components instead.
`GetStaticPaths`	`getStaticPaths` defines dynamic Pages Router paths for static prerendering. It is deprecated for App Router usage, where `generateStaticParams` is the replacement.
`NextApiRequest`	Type Alias
`NextApiResponse`	Type Alias
`AppProps`	AppProps types the props received by a custom Pages Router App. It supplies the active page component and its page props so the App can render shared layouts or initialization logic.

Const

Name	What it does
`dynamic`	`export const dynamic = 'force-dynamic'` opts an App Router route into request-time rendering. Use it when the route must reflect current or personalized data.
`revalidate`	Const
`fetchCache`	`fetchCache` is a route-segment export that overrides the default caching behavior of fetch requests in a layout or page. Its policy controls whether requests are cached, uncached, or required to follow one of those modes.
`runtime`	`runtime` selects the JavaScript runtime used to render a Next.js route segment. Node.js is the default; the documentation marks Edge as deprecated.
`preferredRegion`	`preferredRegion` is a route-segment export that passes a preferred deployment region to the hosting platform. It is deprecated in current Next.js documentation and should be removed from route files.
`dynamicParams`	dynamicParams controls requests for dynamic route segments that generateStaticParams did not generate. It defaults to true for request-time generation; false makes those paths return 404.
`maxDuration`	`maxDuration` sets the maximum server-side execution time for a route segment, in seconds. Export it from a layout, page, or route file so the deployment platform can apply the limit.
`experimental_ppr`	Const

Module

Name	What it does
`next/link`	The Link component from next/link is the primary way to navigate between routes in a Next.js App Router application. It extends an HTML anchor with client-side navigation and route prefetching.
`next/image`	next/image extends HTML img with automatic optimization. It supports local and configured remote sources, responsive sizing, modern formats, layout stability, and lazy loading.
`next/script`	`next/script` is Next.js’s component for optimizing third-party and inline scripts. Configure its loading timing with `strategy` and respond to lifecycle events with `onLoad`, `onReady`, or `onError`.
`next/navigation`	Module
`next/headers`	next/headers provides the asynchronous headers function for reading incoming request headers. It returns a read-only Web Headers object and uses request-time data, so calling it opts the route into dynamic rendering.
`next/cache`	Module
`next/server`	Module
`next/font/google`	`next/font/google` provides build-time Google Font loaders for Next.js. Fonts are optimized, self-hosted with the deployment, and applied through the loader result.
`next/font/local`	`next/font/local` loads local font files through Next.js's font optimization system. It self-hosts the assets and returns generated font styling values that can be applied to elements.
`next/og`	`next/og` exports `ImageResponse` for generating dynamic Open Graph, Twitter, and other images from JSX and CSS. It can be returned from Route Handlers or metadata image files.
`next/dynamic`	`next/dynamic` lazy-loads Client Components and libraries so they can be omitted from the initial JavaScript bundle. It combines dynamic imports with React lazy loading and Suspense, with options for fallback UI and client-only rendering.
`next/form`	Next.js’s `<Form>` component enhances HTML forms with progressive enhancement, prefetching, and client-side navigation. String actions use GET-style search parameters; function actions invoke a Server Action.

Directive

Name	What it does
`use client`	'use client' marks a module as a client entry point in the App Router. Use it for interactive UI that needs state, event handlers, or browser APIs, while keeping boundary props serializable.
`use server`	`use server` marks a function or module for server execution. Use it at file scope for all exports or inside an asynchronous function for a single Server Function.
`middleware`	Middleware runs before a request completes and can redirect, rewrite, or modify headers. In Next.js 16, the middleware convention is deprecated and replaced by Proxy, except when retaining Edge-runtime usage.
`instrumentation`	Next.js instrumentation runs server-startup code for observability and logging. Export register from a root-level instrumentation.ts/js file, or from src when using that layout.
`page`	Use a page file to define UI unique to an App Router route. Put it in a route folder and default-export a React component; the file makes that route segment publicly accessible.
`layout`	Use a layout file to define UI shared by a route segment and its descendants. Export a component that renders its required children prop; the root layout also defines the document's html and body elements.
`template`	Use `template.tsx` to wrap nested App Router content when each navigation should create a fresh component instance. Unlike layouts, templates reset descendant DOM, state, and effects as users move between routes that share the template.
`loading`	Use loading.js or loading.tsx in an App Router segment to provide instant fallback UI while that segment streams. Next.js automatically places it in a Suspense boundary and swaps in the completed content.
`error`	Use a route segment's error.tsx file to catch unexpected runtime failures and render fallback UI. Next.js supplies the error and a reset callback so the boundary can report the failure and retry.
`global-error`	global-error.js is the App Router convention for handling failures in the root layout or template. It is a Client Component that replaces the root layout while active and must render its own html and body elements.
`not-found`	Use notFound() in the Next.js App Router to handle missing resources. It stops the current route segment and renders the nearest custom or default 404 UI.
`route`	Route Handlers define custom HTTP endpoints in the App Router with route.ts or route.js files. Export functions named for supported HTTP methods and return standard web Response objects.
`default`	The default.js convention defines fallback UI for Parallel Routes when Next.js cannot recover a slot's active state after a full-page load. Add a default file to named slots, and sometimes to the implicit children slot, to prevent errors or a 404.
`sitemap`	Next.js App Router supports static sitemap.xml files and generated sitemap.ts or sitemap.js files. Generated sitemaps export a default function that returns URL entries for search-engine crawlers.
`robots`	Next.js can serve robots.txt from app/robots.txt or generate it with app/robots.ts or app/robots.js. Generated files return a Robots object describing crawler rules and optional sitemap or host metadata.
`manifest`	Next.js App Router supports static or generated web app manifests. Put the manifest at the root of `app` and use either a JSON/webmanifest file or a JS/TS module returning a Manifest object.
`opengraph-image`	The opengraph-image convention sets the Open Graph preview image for an App Router route segment. Use a supported image file for static metadata or a JavaScript, TypeScript, or TSX file to generate the image.
`twitter-image`	Use the `twitter-image` file convention to define the Twitter card image for an App Router route segment. Provide a supported static image or generate one through a dedicated route.
`icon`	Use an `icon` file in an App Router route segment to provide an application icon. Choose a static supported image or generate the icon with JavaScript, TypeScript, or TSX.
`apple-icon`	The `apple-icon` file convention defines an Apple touch icon for an App Router application. Add a supported image under `app`, or generate the icon from an `apple-icon` route.
`use cache`	The 'use cache' directive marks an async route, React component, function, or file exports as cacheable. Enable Cache Components first, then place the directive at the desired scope to reuse the resulting output.

Command

Name	What it does
`next dev`	`next dev` starts a Next.js application in development mode with Hot Module Reloading and error reporting. It supports options for server configuration, debugging, and experimental development builds.
`next build`	`next build` compiles a Next.js application for production, prerenders eligible routes, and writes the result to `.next/`. It also reports how routes are served.
`next start`	Starts a previously built Next.js application in production mode. It supports selecting the directory, port, hostname, connection timeout, and optional CPU profiling.
`next lint`	`next lint` was removed in Next.js 16. Run ESLint or Biome directly from package scripts, and use the migration codemod for existing projects.
`next info`	`next info` prints system, toolchain, dependency, and Next.js configuration details for diagnosing issues and preparing bug reports. Use `--verbose` for additional debugging information.
`create-next-app`	`create-next-app` scaffolds a Next.js application from the default template or a public GitHub example. It supports interactive prompts and command-line options for repeatable project setup.
`next telemetry`	`next telemetry` manages Next.js's optional anonymous usage-data collection. Enable, disable, or inspect it from the project root, with environment variables available for debugging or opt-out.

Search across every package and filter by type in your dashboard.

Start learning