Объект Metadata и параметры generateMetadata

На этой странице представлены все параметры Metadata на основе Config с generateMetadata и статический объект metadata.

import { Metadata } from 'next'
 
// either Static metadata
export const metadata: Metadata = {
  title: '...',
}
 
// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

Важно знать:

Экспорт объекта metadata и функции generateMetadata поддерживается только в компонентах сервера.

Вы не можете экспортировать и объект metadata и функцию generateMetadata из одного и того же сегмента маршрута.

Объект metadata

Для определения статического metadata экспортируйте объект Metadata из файла layout.js или page.js.

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

См. Поля Metadata для полного списка поддерживаемых параметров.

Функция generateMetadata

Динамический metadata, зависящий от динамической информации, такой как текущие параметры маршрута, внешние данные или metadata в родительских сегментах, может быть задан путем экспорта функции generateMetadata, которая возвращает объект Metadata.

import { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

Параметры

Функция generateMetadata принимает следующие параметры:

props - Объект, содержащий параметры текущего маршрута:

params - Объект, содержащий объект динамических параметров маршрута от корневого сегмента до сегмента, из которого вызывается generateMetadata. Примеры:

Маршрут	URL	`params`
`app/shop/[slug]/page.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/page.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/page.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

searchParams - Объект, содержащий параметры запроса текущего URL. Примеры:

URL searchParams

/shop?a=1 { a: '1' }

/shop?a=1&b=2 { a: '1', b: '2' }

/shop?a=1&a=2 { a: ['1', '2'] }

parent - Обещание разрешенного metadata из родительских сегментов маршрута.

URL	`searchParams`
`/shop?a=1`	`{ a: '1' }`
`/shop?a=1&b=2`	`{ a: '1', b: '2' }`
`/shop?a=1&a=2`	`{ a: ['1', '2'] }`

Возвращаемое значение

Функция generateMetadata должна возвращать объект Metadata, содержащий одно или несколько полей metadata.

Важно знать:

Если metadata не зависит от информации выполнения, он должен быть определен с помощью статического объекта metadata, а не generateMetadata.

fetch запросы автоматически кешируются для одних и тех же данных в сегментах generateMetadata, generateStaticParams, макетах, страницах и компонентах сервера. React cache может быть использован, если fetch недоступен.

searchParams доступны только в сегментах page.js.

Методы redirect() и notFound() Next.js также могут быть использованы внутри generateMetadata.

Поля Metadata

title

Атрибут title используется для установки заголовка документа. Он может быть определен как простой строка или необязательный объект шаблона.

Строка

export const metadata = {
  title: 'Next.js',
}

<title>Next.js</title>

Объект шаблона

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}

По умолчанию

title.default может быть использован для обеспечения заголовка по умолчанию для дочерних сегментов маршрута, которые не определяют title.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    default: 'Acme',
  },
}

import type { Metadata } from 'next'
 
export const metadata: Metadata = {}
 
// Output: <title>Acme</title>

Шаблон

title.template может быть использован для добавления префикса или суффикса к titles, определенному в дочерних сегментах маршрута.

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // a default is required when creating a template
  },
}

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'About',
}
 
// Output: <title>About | Acme</title>

Важно знать:

title.template относится к дочерним сегментам маршрута, а не к сегменту, в котором он определен. Это означает:

title.default требуется при добавлении title.template.

title.template определенный в layout.js не будет применяться к title , определенному в page.js того же сегмента маршрута.

title.template определенный в page.js не имеет эффекта, потому что страница всегда является завершающим сегментом (она не имеет дочерних сегментов маршрута).

title.template не имеет эффекта, если маршрут не определил title или title.default.

Абсолютный

title.absolute может быть использован для предоставления заголовка, который игнорирует title.template, заданный в родительских сегментах.

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
}

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
}
 
// Output: <title>About</title>

Важно знать:

layout.js

title (строка) и title.default определяют заголовок по умолчанию для дочерних сегментов (которые не определяют свой собственный title). Он будет дополнять title.template от ближайшего родительского сегмента, если он существует.

title.absolute определяет заголовок по умолчанию для дочерних сегментов. Он игнорирует title.template из родительских сегментов.

title.template определяет новый шаблон заголовка для дочерних сегментов.

page.js

Если страница не определяет свой собственный заголовок, будет использоваться заголовок ближайшего родительского сегмента.

title (строка) определяет заголовок маршрута. Он будет дополнять title.template от ближайшего родительского сегмента, если он существует.

title.absolute определяет заголовок маршрута. Он игнорирует title.template от родительских сегментов.

title.template не имеет эффекта в page.js , потому что страница всегда является конечным сегментом маршрута.

description

export const metadata = {
  description: 'The React Framework for the Web',
}

<meta name="description" content="The React Framework for the Web" />

Основные поля

export const metadata = {
  generator: 'Next.js',
  applicationName: 'Next.js',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript'],
  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
  creator: 'Jiachi Liu',
  publisher: 'Sebastian Markbåge',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

<meta name="application-name" content="Next.js" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="generator" content="Next.js" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="color-scheme" content="dark" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />

metadataBase

metadataBase — это удобный параметр для установки префикса базового URL для полей metadata , которые требуют полного URL.

metadataBase позволяет полям metadata на основе URL, определенным в текущем сегменте маршрута и ниже, использовать относительный путь вместо требуемого абсолютного URL.
Относительный путь поля будет составлен с помощью metadataBase для формирования полного URL.
Если не настроено, metadataBase автоматически заполняется значением по умолчанию.

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}

<link rel="canonical" href="https://acme.com" />
<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
<meta property="og:image" content="https://acme.com/og-image.png" />

Важно знать:

metadataBase обычно устанавливается в корневом сегменте app/layout.js для применения к полям URL-based metadata по всем маршрутам.

Все поля metadata на основе URL, требующие абсолютных URL, могут быть настроены с помощью параметра metadataBase.

metadataBase может содержать домен, например, https://app.acme.com или базовый путь, например, https://acme.com/start/from/here

Если поле metadata предоставляет абсолютный URL, metadataBase будет проигнорировано.

Использование относительного пути в поле metadata на основе URL без настройки metadataBase приведет к ошибке сборки.

Next.js будет нормализовывать дублирующиеся слеши между metadataBase (например, https://acme.com/) и относительным полем (например, /path) в один слеш (например, https://acme.com/path)

Значение по умолчанию

Если не настроено, metadataBase имеет значение по умолчанию

При обнаружении VERCEL_URL: https://${process.env.VERCEL_URL} в противном случае используется http://localhost:${process.env.PORT || 3000}.
При переопределении значения по умолчанию рекомендуется использовать переменные окружения для вычисления URL. Это позволяет настроить URL для локальной разработки, этапа тестирования и среды производства.

Состав URL

Состав URL отдаёт предпочтение намерениям разработчика перед стандартной семантикой перехода по каталогам.

Косые черты в конце metadataBase и metadata полей нормализуются.
«Абсолютный» путь в поле metadata (обычно заменяющий весь путь URL) обрабатывается как «относительный» путь (начало от конца metadataBase).

Например, при следующих metadataBase:

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  metadataBase: new URL('https://acme.com'),
}

Любые поля metadata , наследующие вышеуказанные metadataBase и устанавливающие собственное значение, будут разрешены следующим образом:

`metadata` поле	Разрешённый URL
`/`	`https://acme.com`
`./`	`https://acme.com`
`payments`	`https://acme.com/payments`
`/payments`	`https://acme.com/payments`
`./payments`	`https://acme.com/payments`
`../payments`	`https://acme.com/payments`
`https://beta.acme.com/payments`	`https://beta.acme.com/payments`

openGraph

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png', // Must be an absolute URL
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
        width: 1800,
        height: 1600,
        alt: 'My custom alt',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:url" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="My custom alt" />
<meta property="og:type" content="website" />

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Seb', 'Josh'],
  },
}

<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
<meta property="article:author" content="Seb" />
<meta property="article:author" content="Josh" />

Важно знать:

Для изображений Open Graph может быть удобнее использовать API метаданных на основе файлов. Вместо необходимости синхронизации экспорта конфигурации с фактическими файлами, API на основе файлов автоматически сгенерирует необходимые метаданные.

robots

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

<meta name="robots" content="noindex, follow, nocache" />
<meta
  name="googlebot"
  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>

иконки

Важно знать: Рекомендуется использовать API метаданных на основе файлов для иконок, где это возможно. Вместо необходимости синхронизации экспорта конфигурации с фактическими файлами, API на основе файлов автоматически сгенерирует необходимые метаданные.

export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}

<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>

export const metadata = {
  icons: {
    icon: [
      { url: '/icon.png' },
      new URL('/icon.png', 'https://example.com'),
      { url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
    ],
    shortcut: ['/shortcut-icon.png'],
    apple: [
      { url: '/apple-icon.png' },
      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
    ],
    other: [
      {
        rel: 'apple-touch-icon-precomposed',
        url: '/apple-touch-icon-precomposed.png',
      },
    ],
  },
}

<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="icon" href="https://example.com/icon.png" />
<link rel="icon" href="/icon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  href="/apple-icon-x3.png"
  sizes="180x180"
  type="image/png"
/>

Важно знать: теги мета msapplication-* больше не поддерживаются в сборках Chromium браузера Microsoft Edge и, следовательно, больше не нужны.

themeColor

Устарело: параметр themeColor в metadata устарел начиная с Next.js 14. Используйте вместо него viewport конфигурацию.

manifest

Манифест веб-приложения, определённый в спецификации манифеста веб-приложения.

export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
}

<link rel="manifest" href="https://nextjs.org/manifest.json" />

twitter

Спецификация Twitter используется не только для X (ранее известного как Twitter).

Дополнительную информацию о справочнике по разметке Twitter Card.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: ['https://nextjs.org/og.png'], // Must be an absolute URL
  },
}

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />

export const metadata = {
  twitter: {
    card: 'app',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: {
      url: 'https://nextjs.org/og.png',
      alt: 'Next.js Logo',
    },
    app: {
      name: 'twitter_app',
      id: {
        iphone: 'twitter_app://iphone',
        ipad: 'twitter_app://ipad',
        googleplay: 'twitter_app://googleplay',
      },
      url: {
        iphone: 'https://iphone_url',
        ipad: 'https://ipad_url',
      },
    },
  },
}

<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:card" content="app" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Next.js Logo" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

viewport

Устарело: параметр viewport в metadata устарел начиная с Next.js 14. Используйте вместо него viewport конфигурацию.

проверка

export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}

<meta name="google-site-verification" content="google" />
<meta name="y_key" content="yahoo" />
<meta name="yandex-verification" content="yandex" />
<meta name="me" content="my-email" />
<meta name="me" content="my-link" />

appleWebApp

export const metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myAppArgument',
  },
  appleWebApp: {
    title: 'Apple Web App',
    statusBarStyle: 'black-translucent',
    startupImage: [
      '/assets/startup/apple-touch-startup-image-768x1004.png',
      {
        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
}

<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, app-argument=myAppArgument"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Apple Web App" />
<link
  href="/assets/startup/apple-touch-startup-image-768x1004.png"
  rel="apple-touch-startup-image"
/>
<link
  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
  media="(device-width: 768px) and (device-height: 1024px)"
  rel="apple-touch-startup-image"
/>
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

альтернативы

export const metadata = {
  alternates: {
    canonical: 'https://nextjs.org',
    languages: {
      'en-US': 'https://nextjs.org/en-US',
      'de-DE': 'https://nextjs.org/de-DE',
    },
    media: {
      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
    },
    types: {
      'application/rss+xml': 'https://nextjs.org/rss',
    },
  },
}

<link rel="canonical" href="https://nextjs.org" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<link
  rel="alternate"
  media="only screen and (max-width: 600px)"
  href="https://nextjs.org/mobile"
/>
<link
  rel="alternate"
  type="application/rss+xml"
  href="https://nextjs.org/rss"
/>

appLinks

export const metadata = {
  appLinks: {
    ios: {
      url: 'https://nextjs.org/ios',
      app_store_id: 'app_store_id',
    },
    android: {
      package: 'com.example.android/package',
      app_name: 'app_name_android',
    },
    web: {
      url: 'https://nextjs.org/web',
      should_fallback: true,
    },
  },
}

<meta property="al:ios:url" content="https://nextjs.org/ios" />
<meta property="al:ios:app_store_id" content="app_store_id" />
<meta property="al:android:package" content="com.example.android/package" />
<meta property="al:android:app_name" content="app_name_android" />
<meta property="al:web:url" content="https://nextjs.org/web" />
<meta property="al:web:should_fallback" content="true" />

архивы

Описывает коллекцию записей, документов или других материалов исторического интереса (источник).

export const metadata = {
  archives: ['https://nextjs.org/13'],
}

<link rel="archives" href="https://nextjs.org/13" />

активы

export const metadata = {
  assets: ['https://nextjs.org/assets'],
}

<link rel="assets" href="https://nextjs.org/assets" />

закладки

export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}

<link rel="bookmarks" href="https://nextjs.org/13" />

категория

export const metadata = {
  category: 'technology',
}

<meta name="category" content="technology" />

другое

Все параметры метаданных должны быть покрыты встроенной поддержкой. Однако могут быть пользовательские теги метаданных, специфичные для вашего сайта, или новые теги метаданных. Вы можете использовать параметр other для отображения любых пользовательских тегов метаданных.

export const metadata = {
  other: {
    custom: 'meta',
  },
}

<meta name="custom" content="meta" />

Если вы хотите сгенерировать несколько тегов мета с одинаковым ключом, вы можете использовать значение массива.

export const metadata = {
  other: {
    custom: ['meta1', 'meta2'],
  },
}

<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />

Неподдерживаемые метаданные

Следующие типы метаданных в настоящее время не поддерживаются встроенно. Однако их всё ещё можно отобразить в макете или на странице.

Метаданные	Рекомендация
`<meta http-equiv="...">`	Используйте соответствующие HTTP-заголовки с помощью `redirect()`, Средств промежуточного звена, Заголовков безопасности
`<base>`	Отобразите тег в макете или на странице.
`<noscript>`	Отобразите тег в макете или на странице.
`<style>`	Узнайте больше о стилизации в Next.js.
`<script>`	Узнайте больше о использовании скриптов.
`<link rel="stylesheet" />`	Отобразите стили `import` непосредственно в макете или на странице.
`<link rel="preload />`	Используйте метод ReactDOM preload
`<link rel="preconnect" />`	Используйте метод ReactDOM preconnect
`<link rel="dns-prefetch" />`	Используйте метод ReactDOM prefetchDNS

Подсказки о ресурсах

Элемент <link> имеет ряд ключевых слов rel, которые могут быть использованы для указания браузеру, что скорее всего потребуется внешний ресурс. Браузер использует эту информацию для применения оптимизации предварительной загрузки в зависимости от ключевого слова.

Хотя API метаданных напрямую не поддерживает эти подсказки, вы можете использовать новые ReactDOM методы, чтобы безопасно вставить их в <head> документа.

'use client'
 
import ReactDOM from 'react-dom'
 
export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')
 
  return null
}

`<link rel="preload">`

Начать загрузку ресурса на ранней стадии жизненного цикла рендеринга страницы (браузер). Документация MDN.

ReactDOM.preload(href: string, options: { as: string })

<link rel="preload" href="..." as="..." />

`<link rel="preconnect">`

Предварительно инициировать подключение к источнику. Документация MDN.

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })

<link rel="preconnect" href="..." crossorigin />

`<link rel="dns-prefetch">`

Попытка разрешить доменное имя до запроса ресурсов. Документация MDN.

ReactDOM.prefetchDNS(href: string)

<link rel="dns-prefetch" href="..." />

Важно знать:

Эти методы в настоящее время поддерживаются только в клиентских компонентах, которые всё ещё рендерятся на стороне сервера при первоначальной загрузке страницы.

Встроенные возможности Next.js, такие как next/font, next/image и next/script, автоматически обрабатывают соответствующие подсказки ресурсов.

React 18.3 ещё не включает определения типов для ReactDOM.preload, ReactDOM.preconnect, и ReactDOM.preconnectDNS. Вы можете использовать // @ts-ignore в качестве временного решения для предотвращения ошибок типизации.

Типы

Вы можете добавить проверку типов к вашим метаданным, используя тип Metadata. Если вы используете встроенный плагин TypeScript в вашем IDE, вам не нужно добавлять тип вручную, но вы можете добавить его явно, если хотите.

Объект метаданных

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Next.js',
}

Функция generateMetadata

Обычная функция

import type { Metadata } from 'next'
 
export function generateMetadata(): Metadata {
  return {
    title: 'Next.js',
  }
}

Асинхронная функция

import type { Metadata } from 'next'
 
export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

С параметрами сегмента

import type { Metadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export function generateMetadata({ params, searchParams }: Props): Metadata {
  return {
    title: 'Next.js',
  }
}
 
export default function Page({ params, searchParams }: Props) {}

С родительскими метаданными

import type { Metadata, ResolvingMetadata } from 'next'
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

Проекты на JavaScript

Для проектов на JavaScript вы можете использовать JSDoc для добавления проверки типов.

/** @type {import("next").Metadata} */
export const metadata = {
  title: 'Next.js',
}

История версий

Версия	Изменения
`v13.2.0`	`viewport`, `themeColor`, и `colorScheme` устарели в пользу конфигурации `viewport`.
`v13.2.0`	`metadata` и `generateMetadata` были введены.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/functions/generate-metadata