Metadata Object and generateMetadata Options

Bu sayfa, generateMetadata ve statik meta veri nesnesi ile tüm Yapılandırma tabanlı Met a Veri seçeneklerini kapsar.

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

Bildiğim iyi oldu:

  • metadata nesnesi ve generateMetadata işlev dışa aktarımları yalnızca Sunucu Bileşenlerinde desteklenir.
  • Aynı rota segmentinden hem metadata nesnesini hem de generateMetadata işlevini dışa aktaramazsınız.

The metadata object

Statik meta verileri tanımlamak için, layout.js veya page.js dosyasından bir Metadata nesnesini dışa aktarın.

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

Desteklenen seçeneklerin tam listesi için Meta Veri Alanları bölümüne bakın.

generateMetadata function

Dinamik meta veriler, geçerli rota parametreleri, harici veriler veya üst segmentlerdeki metadata gibi dinamik bilgilere bağlıdır ve bir Metadata nesnesi döndüren bir generateMetadata işlevi dışa aktarılarak ayarlanabilir.

app/products/[id]/page.tsx
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) {}

Parameters

generateMetadata fonksiyonu aşağıdaki parametreleri kabul eder:

Returns

generateMetadata bir veya daha fazla meta veri alanı içeren bir Metadata nesnesi döndürmelidir.

Bildiğim iyi oldu:

  • Meta veriler çalışma zamanı bilgilerine bağlı değilse, generateMetadata yerine statik metadata nesnesi kullanılarak tanımlanmalıdır.
  • fetch generateMetadata , generateStaticParams, Düzenler, Sayfalar ve Sunucu Bileşenleri arasında aynı veriler için istekler otomatik olarak not edilir. fetch kullanılamıyorsa React cache kullanılabilir.
  • searchParams yalnızca page.js segmentlerinde mevcuttur.
  • Bu redirect() ve notFound() Next.js yöntemleri generateMetadata içinde de kullanılabilir.

Metadata Fields

title

title niteliği, belgenin başlığını ayarlamak için kullanılır. Basit bir dize veya isteğe bağlı bir şablon nesnesi olarak tanımlanabilir.

String

layout.js | page.js
export const metadata = {
  title: 'Next.js',
}
<head> output
<title>Next.js</title>

Template object

app/layout.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}
Default

title.default bir title tanımlamayan alt rota segmentlerine geri dönüş başlığı sağlamak için kullanılabilir.

app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    default: 'Acme',
  },
}
app/about/page.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {}
 
// Output: <title>Acme</title>
Template

title.template alt rota segmentlerinde tanımlanan titles adresine bir önek veya sonek eklemek için kullanılabilir.

app/layout.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // a default is required when creating a template
  },
}
app/about/page.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'About',
}
 
// Output: <title>About | Acme</title>

Bildiğim iyi oldu:

  • title.template tanımlandığı segment için değil, alt rota segmentleri için geçerlidir. Bu şu anlama gelir:

    • title.default bir title.template eklediğinizde gereklidir.
    • title.template layout.js içinde tanımlanan, aynı rota segmentinin page.js içinde tanımlanan bir title için geçerli olmayacaktır.
    • title.template page.js adresinde tanımlanan bir sayfa her zaman sonlandırıcı segment olduğundan (herhangi bir alt rota segmenti yoktur) hiçbir etkisi yoktur.

  • title.template bir rota bir title veya title.default tanımlamamışsa hiçbir etkisi yoktur.

Absolute

title.absolute üst segmentlerde ayarlanan title.template adresini yok sayan bir başlık sağlamak için kullanılabilir.

app/layout.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
}
app/about/page.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
}
 
// Output: <title>About</title>

Bildiğim iyi oldu:

  • layout.js

    • title (string) ve title.default alt segmentler için varsayılan başlığı tanımlar (kendi title'larını tanımlamayan). Varsa, title.template adresini en yakın üst segmentten artıracaktır.
    • title.absolute alt segmentler için varsayılan başlık tanımlar. Ana segmentlerden gelen title.template adresini yok sayar.
    • title.template Alt segmentler için yeni bir başlık şablonu tanımlar.

  • page.js

    • Bir sayfa kendi başlığını tanımlamazsa, en yakın ebeveyn tarafından çözümlenmiş başlık kullanılır.
    • title (string) rotaların başlığını tanımlar. Varsa, title.template adresini en yakın üst segmentten artıracaktır.
    • title.absolute rota başlığını tanımlar. Ana segmentlerden title.template 'u yok sayar.
    • title.template page.js 'da hiçbir etkisi yoktur çünkü bir sayfa her zaman bir rotanın sonlandırıcı segmentidir.

description

layout.js | page.js
export const metadata = {
  description: 'The React Framework for the Web',
}
<head> output
<meta name="description" content="The React Framework for the Web" />

Basic Fields

layout.js | page.js
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,
  },
}
<head> output
<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 tam nitelikli URL gerektiren metadata alanları için bir temel URL öneki ayarlamaya yönelik bir kolaylık seçeneğidir.

layout.js | page.js
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',
  },
}
<head> output
<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" />

Bildiğim iyi oldu:

  • metadataBase genellikle tüm rotalarda URL tabanlı metadata alanlarına uygulanmak üzere kök app/layout.js adresinde ayarlanır.
  • Mutlak URL'ler gerektiren tüm URL tabanlı metadata alanları metadataBase seçeneği ile yapılandırılabilir.
  • metadataBase https://app.acme.com gibi bir alt alan adı veya örneğin temel yol içerebilir. https://acme.com/start/from/here
  • Bir metadata alanı mutlak bir URL sağlarsa, metadataBase yok sayılır.
  • URL tabanlı bir metadata alanında metadataBase yapılandırılmadan göreli bir yol kullanılması derleme hatasına neden olur.
  • Next.js, metadataBase (örn. https://acme.com/) ve göreli bir alan (örn. /path) arasındaki yinelenen eğik çizgileri tek bir eğik çizgiye (örn. https://acme.com/path) normalleştirecektir

Default value

Yapılandırılmamışsa, metadataBase varsayılan bir değere sahiptir

URL Composition

URL bileşimi, varsayılan dizin geçişi semantiği yerine geliştirici amacını tercih eder.

Örneğin, aşağıda verilen metadataBase:

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

Yukarıdaki metadataBase adresini devralan ve kendi değerini belirleyen metadata alanları aşağıdaki gibi çözümlenecektir:

metadata fieldResolved URL
/https://acme.com
./https://acme.com
paymentshttps://acme.com/payments
/paymentshttps://acme.com/payments
./paymentshttps://acme.com/payments
../paymentshttps://acme.com/payments
https://beta.acme.com/paymentshttps://beta.acme.com/payments

openGraph

layout.js | page.js
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',
  },
}
<head> output
<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" />
layout.js | page.js
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'],
  },
}
<head> output
<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" />

Bildiğim iyi oldu:

  • Open Graph görüntüleri için dosya tabanlı Meta Veri API 'sini kullanmak daha uygun olabilir. Yapılandırma dışa aktarımını gerçek dosyalarla senkronize etmek zorunda kalmak yerine, dosya tabanlı API sizin için doğru meta verileri otomatik olarak oluşturacaktır.

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,
    },
  },
}
<head> output
<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"
/>

icons

Bilmekte fayda var: Mümkün olan yerlerde simgeler için dosya tabanlı Meta Veri API 'sini kullanmanızı öneririz. Yapılandırma dışa aktarımını gerçek dosyalarla senkronize etmek zorunda kalmak yerine, dosya tabanlı API sizin için doğru meta verileri otomatik olarak oluşturacaktır.

layout.js | page.js
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',
    },
  },
}
<head> output
<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"
/>
layout.js | page.js
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',
      },
    ],
  },
}
<head> output
<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"
/>

Bilmekte fayda var: msapplication-* meta etiketleri Microsoft Edge'in Chromium sürümlerinde artık desteklenmemektedir ve bu nedenle artık gerekli değildir.

themeColor

Kullanımdan kaldırılmıştır: metadata adresindeki themeColor seçeneği Next.js 14'ten itibaren kullanımdan kaldırılmıştır. Lütfen bunun yerine viewport yapılandırmasını kullanın.

manifest

Web Uygulaması Manifestosu spesifikasyonunda tanımlandığı gibi bir web uygulaması manifestosu .

layout.js | page.js
export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
}
<head> output
<link rel="manifest" href="https://nextjs.org/manifest.json" />

twitter

Twitter spesifikasyonu (şaşırtıcı bir şekilde) X'ten (eski adıyla Twitter) daha fazlası için kullanılmaktadır.

Twitter Card işaretleme referansı hakkında daha fazla bilgi edinin .

layout.js | page.js
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
  },
}
<head> output
<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" />
layout.js | page.js
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',
      },
    },
  },
}
<head> output
<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

Kullanımdan kaldırılmıştır: metadata adresindeki viewport seçeneği Next.js 14'ten itibaren kullanımdan kaldırılmıştır. Lütfen bunun yerine viewport yapılandırmasını kullanın.

verification

layout.js | page.js
export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}
<head> output
<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

layout.js | page.js
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)',
      },
    ],
  },
}
<head> output
<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"
/>

alternates

layout.js | page.js
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',
    },
  },
}
<head> output
<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"
/>
layout.js | page.js
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,
    },
  },
}
<head> output
<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" />

archives

Kayıtların, belgelerin veya tarihi ilgi çekici diğer materyallerin bir koleksiyonunu tanımlar(kaynak).

layout.js | page.js
export const metadata = {
  archives: ['https://nextjs.org/13'],
}
<head> output
<link rel="archives" href="https://nextjs.org/13" />

assets

layout.js | page.js
export const metadata = {
  assets: ['https://nextjs.org/assets'],
}
<head> output
<link rel="assets" href="https://nextjs.org/assets" />

bookmarks

layout.js | page.js
export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}
<head> output
<link rel="bookmarks" href="https://nextjs.org/13" />

category

layout.js | page.js
export const metadata = {
  category: 'technology',
}
<head> output
<meta name="category" content="technology" />

other

Yerleşik destek kullanılarak tüm meta veri seçenekleri kapsanmalıdır. Ancak, sitenize özel meta veri etiketleri veya yeni yayınlanan yepyeni meta veri etiketleri olabilir. Herhangi bir özel meta veri etiketini işlemek için other seçeneğini kullanabilirsiniz.

layout.js | page.js
export const metadata = {
  other: {
    custom: 'meta',
  },
}
<head> output
<meta name="custom" content="meta" />

Birden fazla aynı anahtar meta etiketi oluşturmak istiyorsanız dizi değeri kullanabilirsiniz.

layout.js | page.js
export const metadata = {
  other: {
    custom: ['meta1', 'meta2'],
  },
}
<head> output
<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />

Unsupported Metadata

Aşağıdaki meta veri türleri şu anda yerleşik desteğe sahip değildir. Ancak, yine de düzende veya sayfanın kendisinde oluşturulabilirler.

MetadataRecommendation
<meta http-equiv="...">Use appropriate HTTP Headers via redirect(), Middleware, Security Headers
<base>Render the tag in the layout or page itself.
<noscript>Render the tag in the layout or page itself.
<style>Learn more about styling in Next.js.
<script>Learn more about using scripts.
<link rel="stylesheet" />import stylesheets directly in the layout or page itself.
<link rel="preload />Use ReactDOM preload method
<link rel="preconnect" />Use ReactDOM preconnect method
<link rel="dns-prefetch" />Use ReactDOM prefetchDNS method

Resource hints

<link> öğesi, tarayıcıya harici bir kaynağa ihtiyaç duyulabileceğini ima etmek için kullanılabilecek bir dizi rel anahtar sözcüğüne sahiptir. Tarayıcı bu bilgiyi anahtar kelimeye bağlı olarak ön yükleme optimizasyonlarını uygulamak için kullanır.

Metadata API'si bu ipuçlarını doğrudan desteklemese de, bunları belgenin <head> adresine güvenli bir şekilde eklemek için yeni ReactDOM yöntemlerini kullanabilirsiniz.

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

Sayfa oluşturma (tarayıcı) yaşam döngüsünün başlarında bir kaynağı yüklemeye başlayın. MDN Docs.

ReactDOM.preload(href: string, options: { as: string })
<head> output
<link rel="preload" href="..." as="..." />

Bir kaynakla bağlantıyı önceden başlatın. MDN Docs.

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
<head> output
<link rel="preconnect" href="..." crossorigin />

Kaynaklar istenmeden önce bir alan adını çözümlemeye çalışın. MDN Docs.

ReactDOM.prefetchDNS(href: string)
<head> output
<link rel="dns-prefetch" href="..." />

Bildiğim iyi oldu:

  • Bu yöntemler şu anda yalnızca ilk sayfa yüklemesinde hala Sunucu Tarafı Oluşturulan İstemci Bileşenlerinde desteklenmektedir.
  • Next.js'nin next/font, next/image ve next/script gibi yerleşik özellikleri ilgili kaynak ipuçlarını otomatik olarak işler.
  • React 18.3 henüz ReactDOM.preload, ReactDOM.preconnect ve ReactDOM.preconnectDNS için tip tanımları içermemektedir. Tip hatalarını önlemek için geçici bir çözüm olarak // @ts-ignore adresini kullanabilirsiniz.

Types

Metadata türünü kullanarak meta verilerinize tür güvenliği ekleyebilirsiniz. IDE'nizde yerleşik TypeScript eklentisini kullanıyorsanız, türü manuel olarak eklemenize gerek yoktur, ancak isterseniz yine de açıkça ekleyebilirsiniz.

metadata object 

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

generateMetadata function

Regular function 

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

Async function 

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

With segment props 

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) {}

With parent metadata 

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

JavaScript Projects

JavaScript projelerinde, tip güvenliği eklemek için JSDoc kullanabilirsiniz.

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

Version History

VersionChanges
v13.2.0viewport, themeColor, and colorScheme deprecated in favor of the viewport configuration.
v13.2.0metadata and generateMetadata introduced.