next

property abstract

abstract?: null | string;

• 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;

• 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;

• The Apple web app metadata for the document.

  Example 1

  { capable: true, title: "My Website", statusBarStyle: "black-translucent" }
  <meta name="apple-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;

• The application name.

  Example 1

  "My Blog"
  <meta name="application-name" content="My Blog" />

property appLinks

appLinks?: null | AppLinks;

• 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>;

• 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>;

• 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>;

• 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>;

• The bookmarks link rel property.

  Example 1

  "https://example.com/bookmarks"
  <link rel="bookmarks" href="https://example.com/bookmarks" />

property category

category?: null | string;

• The category meta name property.

  Example 1

  "My Category"
  <meta name="category" content="My Category" />

property classification

classification?: null | string;

• The classification meta name property.

  Example 1

  "My Classification"
  <meta name="classification" content="My Classification" />

property colorScheme

colorScheme?: null | ColorSchemeEnum;

• The color scheme for the document.

  Example 1

  Deprecated

  "dark"
  <meta name="color-scheme" content="dark" />

property creator

creator?: null | string;

• The creator of the document.

  Example 1

  "Next.js Team"
  <meta name="creator" content="Next.js Team" />

property description

description?: null | string;

• The document description, and optionally the OpenGraph and twitter descriptions.

  Example 1

  "My Blog Description"
  <meta name="description" content="My Blog Description" />

property formatDetection

formatDetection?: null | FormatDetection;

• 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;

• The generator used for the document.

  Example 1

  "Next.js"
  
  <meta name="generator" content="Next.js" />

property icons

icons?: null | IconURL | Array<Icon> | Icons;

• 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;

• 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>;

• 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;

• 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;

• The base path and origin for absolute urls for various metadata links such as OpenGraph images.

property openGraph

openGraph?: null | OpenGraph;

• 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;

• Arbitrary name/value pairs for the document.

property publisher

publisher?: null | string;

• The publisher of the document.

  Example 1

  "Vercel"
  <meta name="publisher" content="Vercel" />

property referrer

referrer?: null | ReferrerEnum;

• The referrer setting for the document.

  Example 1

  "origin"
  <meta name="referrer" content="origin" />

property robots

robots?: null | string | Robots;

• 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[];

• The theme color for the document.

  Example 1

  Deprecated

  "#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" />

property title

title?: null | string | TemplateString;

• 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;

• 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;

• 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;

• The viewport setting for the document.

  Example 1

  Deprecated

  { width: "device-width", initialScale: 1 }
  <meta name="viewport" content="width=device-width, initial-scale=1" />

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

property amp

amp?: {
    canonicalBase?: string;
};

• See Also

  • [next/amp](https://nextjs.org/docs/api-reference/next/amp)

property analyticsId

analyticsId?: string;

• The field should only be used when a Next.js project is not hosted on Vercel while using Vercel Speed Insights. Vercel provides zero-configuration insights for Next.js projects hosted on Vercel.

  ''

  See Also

  • [how to fix deprecated analyticsId](https://nextjs.org/docs/messages/deprecated-analyticsid)

  Deprecated

  will be removed in next major version. Read more: https://nextjs.org/docs/messages/deprecated-analyticsid

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 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;
          };
};

• 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 /> components

  See 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';
};

• 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/basic-features/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 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/basic-features/image-optimization#using-the-image-component)

property logging

logging?: {
    fetches?: {
        fullUrl?: boolean;
    };
};

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 optimizeFonts

optimizeFonts?: boolean;

• By default, Next.js will automatically inline font CSS at build time

  true version 10.2

  See Also

  • [Font Optimization](https://nextjs.org/docs/basic-features/font-optimization)

property output

output?: 'standalone' | 'export';

• The type of build output. - undefined: The default build output, .next directory, that works with production mode next 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 outputFileTracing

outputFileTracing?: boolean;

• During a build, Next.js will automatically trace each page and its dependencies to determine all of the files that are needed for deploying a production version of your application.

  See Also

  • [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing)

  Deprecated

  will be enabled by default and removed in Next.js 15

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 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?: {
    [key: string]: any;
};

• See Also

  • [Customizing sass options](https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options)

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 swcMinify

swcMinify?: boolean;

• Use [SWC compiler](https://swc.rs) to minify the generated JavaScript

  See Also

  • [SWC Minification](https://nextjs.org/docs/advanced-features/compiler#minification)

  Deprecated

  will be enabled by default and removed in Next.js 15

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 the next-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/basic-features/typescript)

property useFileSystemPublicRoutes

useFileSystemPublicRoutes?: boolean;

• By default, Next will serve each file in the pages folder under a pathname matching the filename. To disable this behavior and prevent routing based set this to true.

  true

  See Also

  • [Disabling file-system routing](https://nextjs.org/docs/advanced-features/custom-server#disabling-file-system-routing)

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)

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.

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 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

property colorScheme

colorScheme: null | ColorSchemeEnum;

property themeColor

themeColor: null | ThemeColorDescriptor[];

property colorScheme

colorScheme?: null | ColorSchemeEnum;

• The color scheme for the document.

  Example 1

  "dark"
  <meta name="color-scheme" content="dark" />

property themeColor

themeColor?: null | string | ThemeColorDescriptor | ThemeColorDescriptor[];

• 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" />