next
- Version 15.1.7
- Published
- 120 MB
- 7 dependencies
- MIT license
Install
npm i next
yarn add next
pnpm add next
Overview
The React Framework
Index
Functions
Interfaces
NextConfig
- amp
- assetPrefix
- basePath
- bundlePagesRouterDependencies
- cacheHandler
- cacheMaxMemorySize
- cleanDistDir
- compiler
- compress
- crossOrigin
- deploymentId
- devIndicators
- distDir
- env
- eslint
- excludeDefaultMomentLocales
- experimental
- expireTime
- exportPathMap
- generateBuildId
- generateEtags
- headers
- httpAgentOptions
- i18n
- images
- logging
- modularizeImports
- onDemandEntries
- output
- outputFileTracingExcludes
- outputFileTracingIncludes
- outputFileTracingRoot
- pageExtensions
- poweredByHeader
- productionBrowserSourceMaps
- publicRuntimeConfig
- reactMaxHeadersLength
- reactProductionProfiling
- reactStrictMode
- redirects
- rewrites
- sassOptions
- serverExternalPackages
- serverRuntimeConfig
- skipMiddlewareUrlNormalize
- skipTrailingSlashRedirect
- staticPageGenerationTimeout
- trailingSlash
- transpilePackages
- typescript
- useFileSystemPublicRoutes
- watchOptions
- webpack
Type Aliases
- FileSizeSuffix
- GetServerSideProps
- GetServerSidePropsContext
- GetServerSidePropsResult
- GetStaticPaths
- GetStaticPathsContext
- GetStaticPathsResult
- GetStaticProps
- GetStaticPropsContext
- GetStaticPropsResult
- InferGetServerSidePropsType
- InferGetStaticPropsType
- NextApiHandler
- NextApiResponse
- NextComponentType
- NextPage
- PageConfig
- PreviewData
- Redirect
- ResolvingMetadata
- ResolvingViewport
- ResponseLimit
- Route
- ServerRuntime
- SizeLimit
Namespaces
Functions
function createServer
createServer: ( options: NextServerOptions & { turbo?: boolean; turbopack?: boolean }) => NextWrapperServer;
Interfaces
interface Metadata
interface Metadata extends DeprecatedMetadataFields {}
Metadata interface to describe all the metadata fields that can be set in a document.
property abstract
abstract?: null | string | undefined;
A brief description of what this web-page is about. Not recommended, superseded by description. It adds the
name="abstract"
meta tag.Example 1
"My Website Description"<meta name="abstract" content="My Website Description" />See Also
https://www.metatags.org/all-meta-tags-overview/meta-name-abstract/
property alternates
alternates?: null | AlternateURLs | undefined;
The canonical and alternate URLs for the document.
Example 1
{ canonical: "https://example.com" }<link rel="canonical" href="https://example.com" />{ canonical: "https://example.com", hreflang: { "en-US": "https://example.com/en-US" } }<link rel="canonical" href="https://example.com" /><link rel="alternate" href="https://example.com/en-US" hreflang="en-US" />Multiple titles example for alternate URLs except
canonical
:{canonical: "https://example.com",types: {'application/rss+xml': [{ url: 'blog.rss', title: 'rss' },{ url: 'blog/js.rss', title: 'js title' },],},}<link rel="canonical" href="https://example.com" /><link rel="alternate" href="https://example.com/blog.rss" type="application/rss+xml" title="rss" /><link rel="alternate" href="https://example.com/blog/js.rss" type="application/rss+xml" title="js title" />
property appleWebApp
appleWebApp?: null | boolean | AppleWebApp | undefined;
The Apple web app metadata for the document.
Example 1
{ capable: true, title: "My Website", statusBarStyle: "black-translucent" }<meta name="mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-title" content="My Website" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />See Also
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
property applicationName
applicationName?: null | string | undefined;
The application name.
Example 1
"My Blog"<meta name="application-name" content="My Blog" />
property appLinks
appLinks?: null | AppLinks | undefined;
The Facebook AppLinks metadata for the document.
Example 1
{ ios: { appStoreId: "123456789", url: "https://example.com" }, android: { packageName: "com.example", url: "https://example.com" } }<meta property="al:ios:app_store_id" content="123456789" /><meta property="al:ios:url" content="https://example.com" /><meta property="al:android:package" content="com.example" /><meta property="al:android:url" content="https://example.com" />
property archives
archives?: null | string | Array<string> | undefined;
The archives link rel property.
Example 1
{ archives: "https://example.com/archives" }<link rel="archives" href="https://example.com/archives" />
property assets
assets?: null | string | Array<string> | undefined;
The assets link rel property.
Example 1
"https://example.com/assets"<link rel="assets" href="https://example.com/assets" />
property authors
authors?: null | Author | Array<Author> | undefined;
The authors of the document.
Example 1
[{ name: "Next.js Team", url: "https://nextjs.org" }]<meta name="author" content="Next.js Team" /><link rel="author" href="https://nextjs.org" />
property bookmarks
bookmarks?: null | string | Array<string> | undefined;
The bookmarks link rel property.
Example 1
"https://example.com/bookmarks"<link rel="bookmarks" href="https://example.com/bookmarks" />
property category
category?: null | string | undefined;
The category meta name property.
Example 1
"My Category"<meta name="category" content="My Category" />
property classification
classification?: null | string | undefined;
The classification meta name property.
Example 1
"My Classification"<meta name="classification" content="My Classification" />
property colorScheme
colorScheme?: null | ColorSchemeEnum | undefined;
The color scheme for the document.
Example 1
"dark"<meta name="color-scheme" content="dark" />See Also
https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
Deprecated
Use
export const viewport: Viewport = { ... }
instead.
property creator
creator?: null | string | undefined;
The creator of the document.
Example 1
"Next.js Team"<meta name="creator" content="Next.js Team" />
property description
description?: null | string | undefined;
The document description, and optionally the OpenGraph and twitter descriptions.
Example 1
"My Blog Description"<meta name="description" content="My Blog Description" />
property facebook
facebook?: null | Facebook | undefined;
The Facebook metadata for the document. You can specify either appId or admins, but not both.
Example 1
{ appId: "12345678" }<meta property="fb:app_id" content="12345678" />Example 2
{ admins: ["12345678"] }<meta property="fb:admins" content="12345678" />
property formatDetection
formatDetection?: null | FormatDetection | undefined;
Indicates if devices should try to interpret various formats and make actionable links out of them. For example it controles if telephone numbers on mobile that can be clicked to dial or not.
Example 1
{ telephone: false }<meta name="format-detection" content="telephone=no" />
property generator
generator?: null | string | undefined;
The generator used for the document.
Example 1
"Next.js"<meta name="generator" content="Next.js" />
property icons
icons?: null | IconURL | Array<Icon> | Icons | undefined;
The icons for the document. Defaults to rel="icon".
Example 1
"https://example.com/icon.png"<link rel="icon" href="https://example.com/icon.png" />{ icon: "https://example.com/icon.png", apple: "https://example.com/apple-icon.png" }<link rel="icon" href="https://example.com/icon.png" /><link rel="apple-touch-icon" href="https://example.com/apple-icon.png" />[{ rel: "icon", url: "https://example.com/icon.png" }, { rel: "apple-touch-icon", url: "https://example.com/apple-icon.png" }]<link rel="icon" href="https://example.com/icon.png" /><link rel="apple-touch-icon" href="https://example.com/apple-icon.png" />See Also
https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-icon
property itunes
itunes?: null | ItunesApp | undefined;
The metadata for the iTunes App. It adds the
name="apple-itunes-app"
meta tag.Example 1
{ app: { id: "123456789", affiliateData: "123456789", appArguments: "123456789" } }<meta name="apple-itunes-app" content="app-id=123456789, affiliate-data=123456789, app-arguments=123456789" />
property keywords
keywords?: null | string | Array<string> | undefined;
The keywords for the document. If an array is provided, it will be flattened into a single tag with comma separation.
Example 1
"nextjs, react, blog"<meta name="keywords" content="nextjs, react, blog" />["react", "server components"]<meta name="keywords" content="react, server components" />
property manifest
manifest?: null | string | URL | undefined;
A web application manifest, as defined in the Web Application Manifest specification.
Example 1
"https://example.com/manifest.json"<link rel="manifest" href="https://example.com/manifest.json" />See Also
https://developer.mozilla.org/docs/Web/Manifest
property metadataBase
metadataBase?: null | URL | undefined;
The base path and origin for absolute urls for various metadata links such as OpenGraph images.
property openGraph
openGraph?: null | OpenGraph | undefined;
The Open Graph metadata for the document.
Example 1
{type: "website",url: "https://example.com",title: "My Website",description: "My Website Description",siteName: "My Website",images: [{url: "https://example.com/og.png",}],}<meta property="og:type" content="website" /><meta property="og:url" content="https://example.com" /><meta property="og:site_name" content="My Website" /><meta property="og:title" content="My Website" /><meta property="og:description" content="My Website Description" /><meta property="og:image" content="https://example.com/og.png" />See Also
https://ogp.me
property other
other?: | ({ [name: string]: string | number | Array<string | number>; } & DeprecatedMetadataFields) | undefined;
Arbitrary name/value pairs for the document.
property publisher
publisher?: null | string | undefined;
The publisher of the document.
Example 1
"Vercel"<meta name="publisher" content="Vercel" />
property referrer
referrer?: null | ReferrerEnum | undefined;
The referrer setting for the document.
Example 1
"origin"<meta name="referrer" content="origin" />
property robots
robots?: null | string | Robots | undefined;
The robots setting for the document.
Example 1
"index, follow"<meta name="robots" content="index, follow" />{ index: false, follow: false }<meta name="robots" content="noindex, nofollow" />See Also
https://developer.mozilla.org/docs/Glossary/Robots.txt
property themeColor
themeColor?: | null | string | ThemeColorDescriptor | ThemeColorDescriptor[] | undefined;
The theme color for the document.
Example 1
"#000000"<meta name="theme-color" content="#000000" />{ media: "(prefers-color-scheme: dark)", color: "#000000" }<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />[{ media: "(prefers-color-scheme: dark)", color: "#000000" },{ media: "(prefers-color-scheme: light)", color: "#ffffff" }]<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" /><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />See Also
https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
Deprecated
Use
export const viewport: Viewport = { ... }
instead.
property title
title?: null | string | TemplateString | undefined;
The document title.
Example 1
"My Blog"<title>My Blog</title>{ default: "Dashboard", template: "%s | My Website" }<title>Dashboard | My Website</title>{ absolute: "My Blog", template: "%s | My Website" }<title>My Blog</title>
property twitter
twitter?: null | Twitter | undefined;
The Twitter metadata for the document.
Example 1
{ card: "summary_large_image", site: "@site", creator: "@creator", images: "https://example.com/og.png" }<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@site" /><meta name="twitter:creator" content="@creator" /><meta name="twitter:title" content="My Website" /><meta name="twitter:description" content="My Website Description" /><meta name="twitter:image" content="https://example.com/og.png" />
property verification
verification?: Verification | undefined;
The common verification tokens for the document.
Example 1
{ verification: { google: "1234567890", yandex: "1234567890", "me": "1234567890" } }<meta name="google-site-verification" content="1234567890" /><meta name="yandex-verification" content="1234567890" /><meta name="me" content="@me" />
property viewport
viewport?: null | string | ViewportLayout | undefined;
The viewport setting for the document.
Example 1
{ width: "device-width", initialScale: 1 }<meta name="viewport" content="width=device-width, initial-scale=1" />See Also
https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
Deprecated
Use
export const viewport: Viewport = { ... }
instead.
interface NextApiRequest
interface NextApiRequest extends IncomingMessage {}
Next
API
route request
property body
body: any;
property cookies
cookies: Partial<{ [key: string]: string;}>;
Object of
cookies
from header
property draftMode
draftMode?: boolean;
property env
env: Env;
property preview
preview?: boolean;
property previewData
previewData?: PreviewData;
Preview data set on the request, if any
property query
query: Partial<{ [key: string]: string | string[];}>;
Object of
query
values from url
interface NextConfig
interface NextConfig extends Record<string, any> {}
Next.js can be configured through a
next.config.js
file in the root of your project directory.This can change the behavior, enable experimental features, and configure other advanced options.
Read more: [Next.js Docs:
next.config.js
](https://nextjs.org/docs/api-reference/next.config.js/introduction)
property amp
amp?: { canonicalBase?: string;};
See Also
[
next/amp
](https://nextjs.org/docs/api-reference/next/amp)
property assetPrefix
assetPrefix?: string;
To set up a CDN, you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.
See Also
[CDN Support with Asset Prefix](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix)
property basePath
basePath?: string;
Deploy a Next.js application under a sub-path of a domain
See Also
[Base path configuration](https://nextjs.org/docs/api-reference/next.config.js/basepath)
property bundlePagesRouterDependencies
bundlePagesRouterDependencies?: boolean;
Enables the bundling of node_modules packages (externals) for pages server-side bundles.
See Also
https://nextjs.org/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies
property cacheHandler
cacheHandler?: string | undefined;
The default cache handler for the Pages and App Router uses the filesystem cache. This requires no configuration, however, you can customize the cache handler if you prefer.
See Also
[Configuring Caching](https://nextjs.org/docs/app/building-your-application/deploying#configuring-caching) and the [API Reference](https://nextjs.org/docs/app/api-reference/next-config-js/incrementalCacheHandlerPath).
property cacheMaxMemorySize
cacheMaxMemorySize?: number;
Configure the in-memory cache size in bytes. Defaults to 50 MB. If
cacheMaxMemorySize: 0
, this disables in-memory caching entirely.See Also
[Configuring Caching](https://nextjs.org/docs/app/building-your-application/deploying#configuring-caching).
property cleanDistDir
cleanDistDir?: boolean;
The build output directory (defaults to
.next
) is now cleared by default except for the Next.js caches.
property compiler
compiler?: { reactRemoveProperties?: | boolean | { properties?: string[]; }; relay?: { src: string; artifactDirectory?: string; language?: 'typescript' | 'javascript' | 'flow'; eagerEsModules?: boolean; }; removeConsole?: | boolean | { exclude?: string[]; }; styledComponents?: boolean | StyledComponentsConfig; emotion?: boolean | EmotionConfig; styledJsx?: | boolean | { useLightningcss?: boolean; }; /** * Replaces variables in your code during compile time. Each key will be * replaced with the respective values. */ define?: Record<string, string>;};
Optionally enable compiler transforms
See Also
[Supported Compiler Options](https://nextjs.org/docs/advanced-features/compiler#supported-features)
property compress
compress?: boolean;
See Also
[Compression documentation](https://nextjs.org/docs/api-reference/next.config.js/compression)
property crossOrigin
crossOrigin?: 'anonymous' | 'use-credentials';
Add
"crossorigin"
attribute to generated<script>
elements generated by<Head />
or<NextScript />
componentsSee Also
[
crossorigin
attribute documentation](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)
property deploymentId
deploymentId?: string;
A unique identifier for a deployment that will be included in each request's query string or header.
property devIndicators
devIndicators?: { /** Show "building..."" indicator in development */ buildActivity?: boolean; /** Position of "building..." indicator in browser */ buildActivityPosition?: | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; appIsrStatus?: boolean;};
Configure indicators in development environment
property distDir
distDir?: string;
Destination directory (defaults to
.next
)
property env
env?: Record<string, string | undefined>;
Next.js comes with built-in support for environment variables
See Also
[Environment Variables documentation](https://nextjs.org/docs/api-reference/next.config.js/environment-variables)
property eslint
eslint?: ESLintConfig;
version 11
See Also
[ESLint configuration](https://nextjs.org/docs/app/api-reference/config/eslint)
property excludeDefaultMomentLocales
excludeDefaultMomentLocales?: boolean;
See Also
[Moment.js locales excluded by default](https://nextjs.org/docs/upgrading#momentjs-locales-excluded-by-default)
property experimental
experimental?: ExperimentalConfig;
Enable experimental features. Note that all experimental features are subject to breaking changes in the future.
property expireTime
expireTime?: ExpireTime;
period (in seconds) where the server allow to serve stale cache
property exportPathMap
exportPathMap?: ( defaultMap: ExportPathMap, ctx: { dev: boolean; dir: string; outDir: string | null; distDir: string; buildId: string; }) => Promise<ExportPathMap> | ExportPathMap;
property generateBuildId
generateBuildId?: () => string | null | Promise<string | null>;
See Also
[Configuring the build ID](https://nextjs.org/docs/api-reference/next.config.js/configuring-the-build-id)
property generateEtags
generateEtags?: boolean;
See Also
[Disabling ETag Configuration](https://nextjs.org/docs/api-reference/next.config.js/disabling-etag-generation)
property headers
headers?: () => Promise<Header[]>;
Headers allow you to set custom HTTP headers for an incoming request path.
See Also
[Headers configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/headers)
property httpAgentOptions
httpAgentOptions?: { keepAlive?: boolean;};
Next.js enables HTTP Keep-Alive by default. You may want to disable HTTP Keep-Alive for certain
fetch()
calls or globally.See Also
[Disabling HTTP Keep-Alive](https://nextjs.org/docs/app/api-reference/next-config-js/httpAgentOptions)
property i18n
i18n?: I18NConfig | null;
Internationalization configuration
See Also
[Internationalization docs](https://nextjs.org/docs/advanced-features/i18n-routing)
property images
images?: ImageConfig;
See Also
[Using the Image Component](https://nextjs.org/docs/app/api-reference/next-config-js/images)
property logging
logging?: LoggingConfig | false;
property modularizeImports
modularizeImports?: Record< string, { transform: string | Record<string, string>; preventFullImport?: boolean; skipDefaultConversion?: boolean; }>;
property onDemandEntries
onDemandEntries?: { /** period (in ms) where the server will keep pages in the buffer */ maxInactiveAge?: number; /** number of pages that should be kept simultaneously without being disposed */ pagesBufferLength?: number;};
Next.js exposes some options that give you some control over how the server will dispose or keep in memory built pages in development.
See Also
[Configuring
onDemandEntries
](https://nextjs.org/docs/api-reference/next.config.js/configuring-onDemandEntries)
property output
output?: 'standalone' | 'export';
The type of build output. -
undefined
: The default build output,.next
directory, that works with production modenext start
or a hosting provider like Vercel -'standalone'
: A standalone build output,.next/standalone
directory, that only includes necessary files/dependencies. Useful for self-hosting in a Docker container. -'export'
: An exported build output,out
directory, that only includes static HTML/CSS/JS. Useful for self-hosting without a Node.js server.See Also
[Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing)
[Static HTML Export](https://nextjs.org/docs/advanced-features/static-html-export)
property outputFileTracingExcludes
outputFileTracingExcludes?: Record<string, string[]>;
This allows manually excluding traced files if too many are included incorrectly on a per-page basis.
property outputFileTracingIncludes
outputFileTracingIncludes?: Record<string, string[]>;
This allows manually including traced files if some were not detected on a per-page basis.
property outputFileTracingRoot
outputFileTracingRoot?: string;
This is the repo root usually and only files above this directory are traced and included.
property pageExtensions
pageExtensions?: string[];
See Also
[Including non-page files in the pages directory](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions)
property poweredByHeader
poweredByHeader?: boolean;
See Also
[Disabling x-powered-by](https://nextjs.org/docs/api-reference/next.config.js/disabling-x-powered-by)
property productionBrowserSourceMaps
productionBrowserSourceMaps?: boolean;
Enable browser source map generation during the production build
See Also
[Source Maps](https://nextjs.org/docs/advanced-features/source-maps)
property publicRuntimeConfig
publicRuntimeConfig?: { [key: string]: any;};
Add public (in browser) runtime configuration to your app
See Also
[Runtime configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration)
property reactMaxHeadersLength
reactMaxHeadersLength?: number;
The maximum length of the headers that are emitted by React and added to the response.
See Also
[React Max Headers Length](https://nextjs.org/docs/api-reference/next.config.js/react-max-headers-length)
property reactProductionProfiling
reactProductionProfiling?: boolean;
Enable react profiling in production
property reactStrictMode
reactStrictMode?: boolean | null;
The Next.js runtime is Strict Mode-compliant.
See Also
[React Strict Mode](https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode)
property redirects
redirects?: () => Promise<Redirect[]>;
Redirects allow you to redirect an incoming request path to a different destination path.
See Also
[Redirects configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/redirects)
property rewrites
rewrites?: () => Promise< | Rewrite[] | { beforeFiles: Rewrite[]; afterFiles: Rewrite[]; fallback: Rewrite[]; }>;
Rewrites allow you to map an incoming request path to a different destination path.
See Also
[Rewrites configuration documentation](https://nextjs.org/docs/api-reference/next.config.js/rewrites)
property sassOptions
sassOptions?: { implementation?: string; [key: string]: any;};
See Also
[Customizing sass options](https://nextjs.org/docs/app/api-reference/next-config-js/sassOptions)
property serverExternalPackages
serverExternalPackages?: string[];
A list of packages that should be treated as external in the server build.
See Also
https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages
property serverRuntimeConfig
serverRuntimeConfig?: { [key: string]: any;};
Add server runtime configuration to your app
See Also
[Runtime configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration)
property skipMiddlewareUrlNormalize
skipMiddlewareUrlNormalize?: boolean;
property skipTrailingSlashRedirect
skipTrailingSlashRedirect?: boolean;
property staticPageGenerationTimeout
staticPageGenerationTimeout?: number;
Timeout after waiting to generate static pages in seconds
60
property trailingSlash
trailingSlash?: boolean;
By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash.
false
See Also
[Trailing Slash Configuration](https://nextjs.org/docs/api-reference/next.config.js/trailing-slash)
property transpilePackages
transpilePackages?: string[];
Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (
node_modules
). This replaces thenext-transpile-modules
package.See Also
[transpilePackages](https://nextjs.org/docs/advanced-features/compiler#module-transpilation)
property typescript
typescript?: TypeScriptConfig;
See Also
[Next.js TypeScript documentation](https://nextjs.org/docs/app/api-reference/config/typescript)
property useFileSystemPublicRoutes
useFileSystemPublicRoutes?: boolean;
By default,
Next
will serve each file in thepages
folder under a pathname matching the filename. To disable this behavior and prevent routing based set this totrue
.true
See Also
[Disabling file-system routing](https://nextjs.org/docs/advanced-features/custom-server#disabling-file-system-routing)
property watchOptions
watchOptions?: { pollIntervalMs?: number;};
property webpack
webpack?: NextJsWebpackConfig | null;
Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case
See Also
[Custom Webpack Config documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)
interface NextPageContext
interface NextPageContext {}
Next
context
property AppTree
AppTree: AppTreeType;
Component
the tree of the App to use if needing to render separately
property asPath
asPath?: string;
String
of the actual path including query.
property defaultLocale
defaultLocale?: string;
The configured default locale
property err
err?: | (Error & { statusCode?: number; }) | null;
Error object if encountered during rendering
property locale
locale?: string;
The currently active locale
property locales
locales?: string[];
All configured locales
property pathname
pathname: string;
Path section of
URL
.
property query
query: ParsedUrlQuery;
Query string section of
URL
parsed as an object.
property req
req?: IncomingMessage;
HTTP
request object.
property res
res?: ServerResponse;
HTTP
response object.
interface ResolvedMetadata
interface ResolvedMetadata extends DeprecatedMetadataFields {}
property abstract
abstract: null | string;
property alternates
alternates: null | ResolvedAlternateURLs;
property appleWebApp
appleWebApp: null | ResolvedAppleWebApp;
property applicationName
applicationName: null | string;
property appLinks
appLinks: null | ResolvedAppLinks;
property archives
archives: null | Array<string>;
property assets
assets: null | Array<string>;
property authors
authors: null | Array<Author>;
property bookmarks
bookmarks: null | Array<string>;
property category
category: null | string;
property classification
classification: null | string;
property colorScheme
colorScheme: null | ColorSchemeEnum;
Deprecated
property creator
creator: null | string;
property description
description: null | string;
property facebook
facebook: null | ResolvedFacebook;
property formatDetection
formatDetection: null | FormatDetection;
property generator
generator: null | string;
property icons
icons: null | ResolvedIcons;
property itunes
itunes: null | ItunesApp;
property keywords
keywords: null | Array<string>;
property manifest
manifest: null | string | URL;
property metadataBase
metadataBase: null | URL;
property openGraph
openGraph: null | ResolvedOpenGraph;
property other
other: | null | ({ [name: string]: string | number | Array<string | number>; } & DeprecatedMetadataFields);
property publisher
publisher: null | string;
property referrer
referrer: null | ReferrerEnum;
property robots
robots: null | ResolvedRobots;
property themeColor
themeColor: null | ThemeColorDescriptor[];
Deprecated
property title
title: null | AbsoluteTemplateString;
property twitter
twitter: null | ResolvedTwitterMetadata;
property verification
verification: null | ResolvedVerification;
property viewport
viewport: null | string;
Deprecated
interface ResolvedViewport
interface ResolvedViewport extends ViewportLayout {}
property colorScheme
colorScheme: null | ColorSchemeEnum;
property themeColor
themeColor: null | ThemeColorDescriptor[];
interface Viewport
interface Viewport extends ViewportLayout {}
property colorScheme
colorScheme?: null | ColorSchemeEnum | undefined;
The color scheme for the document.
Example 1
"dark"<meta name="color-scheme" content="dark" />
property themeColor
themeColor?: | null | string | ThemeColorDescriptor | ThemeColorDescriptor[] | undefined;
The theme color for the document.
Example 1
"#000000"<meta name="theme-color" content="#000000" />{ media: "(prefers-color-scheme: dark)", color: "#000000" }<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />[{ media: "(prefers-color-scheme: dark)", color: "#000000" },{ media: "(prefers-color-scheme: light)", color: "#ffffff" }]<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" /><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
Type Aliases
type FileSizeSuffix
type FileSizeSuffix = `${'k' | 'K' | 'm' | 'M' | 'g' | 'G' | 't' | 'T' | 'p' | 'P'}${ | 'b' | 'B'}`;
type GetServerSideProps
type GetServerSideProps< Props extends { [key: string]: any; } = { [key: string]: any; }, Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = ( context: GetServerSidePropsContext<Params, Preview>) => Promise<GetServerSidePropsResult<Props>>;
Server-side Rendering feature for Next.js. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props https://nextjs.org/docs/pages/api-reference/config/typescript#static-generation-and-server-side-rendering
Example 1
```ts export const getServerSideProps: GetServerSideProps = async (context) => { // ... }
type GetServerSidePropsContext
type GetServerSidePropsContext< Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = { req: IncomingMessage & { cookies: NextApiRequestCookies; }; res: ServerResponse; params?: Params; query: ParsedUrlQuery; preview?: boolean; previewData?: Preview; draftMode?: boolean; resolvedUrl: string; locale?: string; locales?: string[]; defaultLocale?: string;};
Context object passed into
getServerSideProps
. https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#context-parameter
type GetServerSidePropsResult
type GetServerSidePropsResult<Props> = | { props: Props | Promise<Props>; } | { redirect: Redirect; } | { notFound: true; };
The return type of
getServerSideProps
. https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#getserversideprops-return-values
type GetStaticPaths
type GetStaticPaths<Params extends ParsedUrlQuery = ParsedUrlQuery> = ( context: GetStaticPathsContext) => Promise<GetStaticPathsResult<Params>> | GetStaticPathsResult<Params>;
Define a list of paths to be statically generated if dynamic routes exist. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths https://nextjs.org/docs/pages/api-reference/config/typescript#static-generation-and-server-side-rendering
Example 1
export const getStaticPaths: GetStaticPaths = async () => {// ...}
type GetStaticPathsContext
type GetStaticPathsContext = { locales?: string[]; defaultLocale?: string;};
type GetStaticPathsResult
type GetStaticPathsResult<Params extends ParsedUrlQuery = ParsedUrlQuery> = { paths: Array< | string | { params: Params; locale?: string; } >; fallback: GetStaticPathsFallback;};
The return type of
getStaticPaths
. https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#getstaticpaths-return-values
type GetStaticProps
type GetStaticProps< Props extends { [key: string]: any; } = { [key: string]: any; }, Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = ( context: GetStaticPropsContext<Params, Preview>) => Promise<GetStaticPropsResult<Props>> | GetStaticPropsResult<Props>;
Static Site Generation feature for Next.js. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props https://nextjs.org/docs/pages/api-reference/config/typescript#static-generation-and-server-side-rendering
Example 1
export const getStaticProps: GetStaticProps = async (context) => {// ...}
type GetStaticPropsContext
type GetStaticPropsContext< Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = { params?: Params; preview?: boolean; previewData?: Preview; draftMode?: boolean; locale?: string; locales?: string[]; defaultLocale?: string; revalidateReason?: 'on-demand' | 'build' | 'stale';};
Context object passed into
getStaticProps
. https://nextjs.org/docs/api-reference/data-fetching/get-static-props#context-parameter
type GetStaticPropsResult
type GetStaticPropsResult<Props> = | { props: Props; revalidate?: number | boolean; } | { redirect: Redirect; revalidate?: number | boolean; } | { notFound: true; revalidate?: number | boolean; };
The return type of
getStaticProps
. https://nextjs.org/docs/api-reference/data-fetching/get-static-props#getstaticprops-return-values
type InferGetServerSidePropsType
type InferGetServerSidePropsType<T extends (args: any) => any> = Awaited< Extract< Awaited<ReturnType<T>>, { props: any; } >['props']>;
type InferGetStaticPropsType
type InferGetStaticPropsType<T extends (args: any) => any> = Extract< Awaited<ReturnType<T>>, { props: any; }>['props'];
type NextApiHandler
type NextApiHandler<T = any> = ( req: NextApiRequest, res: NextApiResponse<T>) => unknown | Promise<unknown>;
Next
API
route handler
type NextApiResponse
type NextApiResponse<Data = any> = ServerResponse & { /** * Send data `any` data in response */ send: Send<Data>; /** * Send data `json` data in response */ json: Send<Data>; status: (statusCode: number) => NextApiResponse<Data>; redirect(url: string): NextApiResponse<Data>; redirect(status: number, url: string): NextApiResponse<Data>; /** * Set draft mode */ setDraftMode: (options: { enable: boolean }) => NextApiResponse<Data>; /** * Set preview data for Next.js' prerender mode */ setPreviewData: ( data: object | string, options?: { /** * Specifies the number (in seconds) for the preview session to last for. * The given number will be converted to an integer by rounding down. * By default, no maximum age is set and the preview session finishes * when the client shuts down (browser is closed). */ maxAge?: number; /** * Specifies the path for the preview session to work under. By default, * the path is considered the "default path", i.e., any pages under "/". */ path?: string; } ) => NextApiResponse<Data>; /** * Clear preview data for Next.js' prerender mode */ clearPreviewData: (options?: { path?: string }) => NextApiResponse<Data>; /** * Revalidate a specific page and regenerate it using On-Demand Incremental * Static Regeneration. * The path should be an actual path, not a rewritten path. E.g. for * "/blog/[slug]" this should be "/blog/post-1". * @link https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath */ revalidate: ( urlPath: string, opts?: { unstable_onlyGenerated?: boolean; } ) => Promise<void>;};
Next
API
route response
type NextComponentType
type NextComponentType< Context extends BaseContext = NextPageContext, InitialProps = {}, Props = {}> = ComponentType<Props> & { /** * Used for initial page load data population. Data returned from `getInitialProps` is serialized when server rendered. * Make sure to return plain `Object` without using `Date`, `Map`, `Set`. * @param context Context of `page` */ getInitialProps?(context: Context): InitialProps | Promise<InitialProps>;};
type NextPage
type NextPage<Props = {}, InitialProps = Props> = NextComponentType< NextPageContext, InitialProps, Props>;
NextPage
type, use it as a guide to createpages
.
type PageConfig
type PageConfig = { amp?: boolean | 'hybrid'; api?: { /** * Configures or disables body size limit warning. Can take a number or * any string format supported by `bytes`, for example `1000`, `'500kb'` or * `'3mb'`. */ responseLimit?: ResponseLimit; /** * The byte limit of the body. This is the number of bytes or any string * format supported by `bytes`, for example `1000`, `'500kb'` or `'3mb'`. */ bodyParser?: | { sizeLimit?: SizeLimit; } | false; /** * Flag to disable warning "API page resolved * without sending a response", due to explicitly * using an external API resolver, like express */ externalResolver?: true; }; env?: Array<string>; /** * Configures the longest time in seconds a serverless function can process an HTTP * request before responding. */ maxDuration?: number; runtime?: ServerRuntime; unstable_runtimeJS?: false; unstable_JsPreload?: false;};
Config
type, use it for export const config
type PreviewData
type PreviewData = string | false | object | undefined;
type Redirect
type Redirect = | { statusCode: 301 | 302 | 303 | 307 | 308; destination: string; basePath?: false; } | { permanent: boolean; destination: string; basePath?: false; };
type ResolvingMetadata
type ResolvingMetadata = Promise<ResolvedMetadata>;
type ResolvingViewport
type ResolvingViewport = Promise<Viewport>;
type ResponseLimit
type ResponseLimit = SizeLimit | boolean;
type Route
type Route<RouteInferType = any> = string & {};
Stub route type for typedRoutes before
next dev
ornext build
is run https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-linksExample 1
import type { Route } from 'next'// ...router.push(returnToPath as Route)
type ServerRuntime
type ServerRuntime = 'nodejs' | 'experimental-edge' | 'edge' | undefined;
type SizeLimit
type SizeLimit = number | `${number}${FileSizeSuffix}`;
Namespaces
namespace *.module.css
module '*.module.css' {}
variable classes
const classes: { readonly [key: string]: string };
namespace *.module.sass
module '*.module.sass' {}
variable classes
const classes: { readonly [key: string]: string };
namespace *.module.scss
module '*.module.scss' {}
variable classes
const classes: { readonly [key: string]: string };
namespace *.svg
module '*.svg' {}
variable content
const content: any;
Use
any
to avoid conflicts with@svgr/webpack
plugin orbabel-plugin-inline-react-svg
plugin.
namespace Instrumentation
namespace Instrumentation {}
type onRequestError
type onRequestError = InstrumentationOnRequestError;
namespace MetadataRoute
namespace MetadataRoute {}
namespace next/dist/compiled/amphtml-validator
module 'next/dist/compiled/amphtml-validator' {}
type ValidationError
type ValidationError = any;
namespace next/dist/compiled/jest-worker
module 'next/dist/compiled/jest-worker' {}
class Worker
class Worker {}
constructor
constructor(...args: any[]);
method end
end: () => any;
namespace next/dist/compiled/superstruct
module 'next/dist/compiled/superstruct' {}
namespace next/dist/compiled/webpack/webpack
module 'next/dist/compiled/webpack/webpack' {}
variable BasicEvaluatedExpression
let BasicEvaluatedExpression: any;
variable GraphHelpers
let GraphHelpers: any;
variable sources
let sources: any;
variable StringXor
let StringXor: any;
variable webpack
var webpack: any;
function init
init: () => void;
type LoaderDefinitionFunction
type LoaderDefinitionFunction<T> = any;
namespace next/dist/compiled/webpack/webpack.webpack
namespace next/dist/compiled/webpack/webpack.webpack {}
type Chunk
type Chunk = any;
type ChunkGroup
type ChunkGroup = any;
type Compilation
type Compilation = any;
type Compiler
type Compiler = any;
type Configuration
type Configuration = any;
type DefinePlugin
type DefinePlugin = any;
type EntryObject
type EntryObject = any;
type LoaderContext
type LoaderContext<T> = any;
type Module
type Module = any;
type NormalModule
type NormalModule = any;
type ResolveOptions
type ResolveOptions = any;
type ResolvePluginInstance
type ResolvePluginInstance = any;
type RuleSetUseItem
type RuleSetUseItem = any;
type RuntimeGlobals
type RuntimeGlobals = any;
type RuntimeModule
type RuntimeModule = any;
type Stats
type Stats = any;
type Template
type Template = any;
type WebpackPluginInstance
type WebpackPluginInstance = any;
namespace next/dist/compiled/webpack/webpack.webpack.sources
namespace next/dist/compiled/webpack/webpack.webpack.sources {}
type RawSource
type RawSource = any;
namespace react-server-dom-webpack/server.edge
module 'react-server-dom-webpack/server.edge' {}
namespace react-server-dom-webpack/static.edge
module 'react-server-dom-webpack/static.edge' {}
namespace styled-jsx
module 'styled-jsx' {}
function createStyleRegistry
createStyleRegistry: () => StyledJsxStyleRegistry;
function StyleRegistry
StyleRegistry: ({ children, registry,}: { children: JSX.Element | import('react').ReactNode; registry?: StyledJsxStyleRegistry;}) => JSX.Element;
function useStyleRegistry
useStyleRegistry: () => StyledJsxStyleRegistry;
type StyledJsxStyleRegistry
type StyledJsxStyleRegistry = { styles(options?: { nonce?: string }): JSX.Element[]; flush(): void; add(props: any): void; remove(props: any): void;};
namespace styled-jsx/css
module 'styled-jsx/css' {}
namespace styled-jsx/macro
module 'styled-jsx/macro' {}
function resolve
resolve: ( chunks: TemplateStringsArray, ...args: any[]) => { className: string; styles: JSX.Element };
namespace styled-jsx/style
module 'styled-jsx/style' {}
function JSXStyle
JSXStyle: (props: any) => null;
namespace VAR_MODULE_APP
module 'VAR_MODULE_APP' {}
namespace VAR_MODULE_DOCUMENT
module 'VAR_MODULE_DOCUMENT' {}
namespace VAR_MODULE_GLOBAL_ERROR
module 'VAR_MODULE_GLOBAL_ERROR' {}
namespace VAR_USERLAND
module 'VAR_USERLAND' {}
Package Files (14)
- dist/lib/metadata/types/metadata-interface.d.ts
- dist/server/config-shared.d.ts
- dist/server/instrumentation/types.d.ts
- dist/server/next.d.ts
- dist/shared/lib/utils.d.ts
- dist/styled-jsx/types/css.d.ts
- dist/styled-jsx/types/index.d.ts
- dist/styled-jsx/types/macro.d.ts
- dist/styled-jsx/types/style.d.ts
- dist/types.d.ts
- image-types/global.d.ts
- index.d.ts
- types/compiled.d.ts
- types/global.d.ts
Dependencies (7)
Dev Dependencies (202)
- @ampproject/toolbox-optimizer
- @babel/code-frame
- @babel/core
- @babel/eslint-parser
- @babel/generator
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-export-namespace-from
- @babel/plugin-proposal-numeric-separator
- @babel/plugin-proposal-object-rest-spread
- @babel/plugin-syntax-bigint
- @babel/plugin-syntax-dynamic-import
- @babel/plugin-syntax-import-attributes
- @babel/plugin-syntax-jsx
- @babel/plugin-transform-modules-commonjs
- @babel/plugin-transform-runtime
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
- @babel/runtime
- @babel/traverse
- @babel/types
- @capsizecss/metrics
- @edge-runtime/cookies
- @edge-runtime/ponyfill
- @edge-runtime/primitives
- @hapi/accept
- @jest/transform
- @jest/types
- @mswjs/interceptors
- @napi-rs/triples
- @next/font
- @next/polyfill-module
- @next/polyfill-nomodule
- @next/react-refresh-utils
- @next/swc
- @opentelemetry/api
- @playwright/test
- @swc/core
- @swc/types
- @taskr/clear
- @taskr/esnext
- @types/amphtml-validator
- @types/babel__code-frame
- @types/babel__core
- @types/babel__generator
- @types/babel__template
- @types/babel__traverse
- @types/bytes
- @types/ci-info
- @types/compression
- @types/content-disposition
- @types/content-type
- @types/cookie
- @types/cross-spawn
- @types/debug
- @types/express-serve-static-core
- @types/fresh
- @types/glob
- @types/jsonwebtoken
- @types/lodash
- @types/lodash.curry
- @types/path-to-regexp
- @types/picomatch
- @types/platform
- @types/react
- @types/react-dom
- @types/react-is
- @types/semver
- @types/send
- @types/shell-quote
- @types/tar
- @types/text-table
- @types/ua-parser-js
- @types/webpack-sources1
- @types/ws
- @vercel/ncc
- @vercel/nft
- @vercel/turbopack-ecmascript-runtime
- acorn
- amphtml-validator
- anser
- arg
- assert
- async-retry
- async-sema
- babel-plugin-react-compiler
- babel-plugin-transform-define
- babel-plugin-transform-react-remove-prop-types
- browserify-zlib
- browserslist
- buffer
- bytes
- ci-info
- cli-select
- client-only
- commander
- comment-json
- compression
- conf
- constants-browserify
- content-disposition
- content-type
- cookie
- cross-env
- cross-spawn
- crypto-browserify
- css.escape
- cssnano-preset-default
- data-uri-to-buffer
- debug
- devalue
- domain-browser
- edge-runtime
- events
- find-up
- fresh
- glob
- gzip-size
- http-proxy
- http-proxy-agent
- https-browserify
- https-proxy-agent
- icss-utils
- ignore-loader
- image-size
- is-docker
- is-wsl
- jest-worker
- json5
- jsonwebtoken
- loader-runner
- loader-utils2
- loader-utils3
- lodash.curry
- mini-css-extract-plugin
- msw
- nanoid
- native-url
- neo-async
- node-html-parser
- ora
- os-browserify
- p-limit
- p-queue
- path-browserify
- path-to-regexp
- picomatch
- platform
- postcss-flexbugs-fixes
- postcss-modules-extract-imports
- postcss-modules-local-by-default
- postcss-modules-scope
- postcss-modules-values
- postcss-preset-env
- postcss-safe-parser
- postcss-scss
- postcss-value-parser
- process
- punycode
- querystring-es3
- raw-body
- react-refresh
- regenerator-runtime
- sass-loader
- schema-utils2
- schema-utils3
- semver
- send
- server-only
- setimmediate
- shell-quote
- source-map
- source-map-loader
- source-map08
- stacktrace-parser
- stream-browserify
- stream-http
- strict-event-emitter
- string_decoder
- string-hash
- strip-ansi
- superstruct
- tar
- taskr
- terser
- terser-webpack-plugin
- text-table
- timers-browserify
- tty-browserify
- typescript
- ua-parser-js
- unistore
- util
- vm-browserify
- watchpack
- web-vitals
- webpack
- webpack-sources1
- webpack-sources3
- ws
- zod
- zod-validation-error
Peer Dependencies (6)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/next
.
- Markdown[](https://www.jsdocs.io/package/next)
- HTML<a href="https://www.jsdocs.io/package/next"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 14039 ms. - Missing or incorrect documentation? Open an issue for this package.