generateMetadata
このページでは、generateMetadata
と静的メタデータオブジェクトを使用したコンフィグベースのメタデータのすべてのオプションについて説明します。
import type { Metadata } from 'next'
// 静的メタデータ
export const metadata: Metadata = {
title: '...',
}
// または動的メタデータ
export async function generateMetadata({ params }) {
return {
title: '...',
}
}
補足:
metadata
オブジェクトとgenerateMetadata
関数のエクスポートは、サーバーコンポーネントでのみサポートされています。- 同じルートセグメントから
metadata
オブジェクトとgenerateMetadata
関数の両方をエクスポートすることはできません。
metadata
オブジェクト
静的メタデータを定義するには、layout.js
またはpage.js
ファイルからMetadata
オブジェクトをエクスポートします。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}
サポートされているオプションの完全なリストについては、メタデータフィールドを参照してください。
generateMetadata
関数
動的メタデータは、現在のルートパラメータ、外部データ、または親セグメントのmetadata
など、動的な情報に依存します。これは、Metadata
オブジェクトを返すgenerateMetadata
関数をエクスポートすることで設定できます。
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: Promise<{ id: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// ルートパラメータを読み取る
const id = (await params).id
// データをフェッチ
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// オプションで親メタデータにアクセスし、拡張(置き換えではなく)
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
- 親ルートセグメントから解決されたメタデータのプロミス。
戻り値
generateMetadata
は、1つ以上のメタデータフィールドを含むMetadata
オブジェクトを返す必要があります。
補足:
- メタデータが実行時の情報に依存しない場合、静的な
metadata
オブジェクトを使用する必要があります。fetch
リクエストは、generateMetadata
、generateStaticParams
、レイアウト、ページ、サーバーコンポーネント間で同じデータに対して自動的にメモ化されます。fetch
が利用できない場合は、Reactcache
を使用できます。searchParams
はpage.js
セグメントでのみ利用可能です。- Next.jsの
redirect()
およびnotFound()
メソッドもgenerateMetadata
内で使用できます。
メタデータフィールド
title
title
属性は、ドキュメントのタイトルを設定するために使用されます。シンプルな文字列または省略可能なテンプレートオブジェクトとして定義できます。
文字列
export const metadata = {
title: 'Next.js',
}
<title>Next.js</title>
テンプレートオブジェクト
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
template: '...',
default: '...',
absolute: '...',
},
}
デフォルト
title.default
は、タイトルを定義していない子ルートセグメントのためのフォールバックタイトルとして使用できます。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'Acme',
},
}
import type { Metadata } from 'next'
export const metadata: Metadata = {}
// 出力: <title>Acme</title>
テンプレート
title.template
は、子ルートセグメントで定義されたtitles
にプレフィックスまたはサフィックスを追加するために使用できます。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
template: '%s | Acme',
default: 'Acme', // テンプレートを作成する際にデフォルトが必要
},
}
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'About',
}
// 出力: <title>About | Acme</title>
補足:
title.template
は子のルートセグメントに適用され、定義されているセグメント自体には適用されません。つまり:
title.template
を追加する場合、title.default
が必須です。layout.js
で定義されたtitle.template
は、同じルートセグメントのpage.js
で定義されたtitle
には適用されません。page.js
で定義されたtitle.template
は効果がありません。ページは常に終端セグメントであるため(子のルートセグメントがないため)。ルートが
title
またはtitle.default
を定義していない場合、title.template
は効果がありません。
絶対パス
title.absolute
は、親セグメントで設定されたtitle.template
を無視するタイトルを提供するために使用できます。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
template: '%s | Acme',
},
}
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
absolute: 'About',
},
}
// 出力: <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
を無視します。page.js
ではtitle.template
は効果がありません。ページは常にルートの終端セグメントであるためです。
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
により、現在のルートセグメント以下で定義されたURL関連のmetadata
フィールドは、相対パスを使用できます。- フィールドの相対パスは
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
は通常、すべてのルートでURL関連のmetadata
フィールドに適用するために、ルートのapp/layout.js
で設定されます。- 絶対URLを必要とするすべてのURL関連の
metadata
フィールドは、metadataBase
オプションで設定できます。metadataBase
はサブドメイン(例:https://app.acme.com
)またはベースパス(例:https://acme.com/start/from/here
)を含むことができます。metadata
フィールドが絶対URLを提供する場合、metadataBase
は無視されます。metadataBase
を設定せずにURL関連のmetadata
フィールドで相対パスを使用すると、ビルドエラーが発生します。- Next.jsは、
metadataBase
(例:https://acme.com/
)と相対フィールド(例:/path
)間の重複するスラッシュを単一のスラッシュ(例:https://acme.com/path
)に正規化します。
デフォルト値
設定されていない場合、metadataBase
はデフォルト値を持ちます。
Vercelの場合:
- 本番デプロイメントでは、
VERCEL_PROJECT_PRODUCTION_URL
が使用されます。- プレビューデプロイメントでは、
VERCEL_BRANCH_URL
が優先され、存在しない場合はVERCEL_URL
にフォールバックします。これらの値が存在する場合、デフォルト値として使用され、それ以外の場合は
http://localhost:${process.env.PORT || 3000}
にフォールバックします。これにより、Open GraphイメージがローカルビルドとVercelのプレビュー、本番デプロイメントの両方で機能します。デフォルトを上書きする場合は、URLを計算するために環境変数を使用することをお勧めします。これにより、ローカル開発、ステージング、本番環境のURLを設定できます。これらの環境変数の詳細については、システム環境変数ドキュメントを参照してください。
URLの構成
URL構成は、デフォルトのディレクトリトラバーサルセマンティクスよりも開発者の意図を優先します。
metadataBase
とmetadata
フィールド間の末尾のスラッシュは正規化されます。metadata
フィールドの「絶対」パス(通常、URLパス全体を置き換える)は、「相対」パス(metadataBase
の末尾から開始)として扱われます。
例えば、次のmetadataBase
が与えられた場合:
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://acme.com'),
}
上記のmetadataBase
を継承し、独自の値を設定するmetadata
フィールドは、次のように解決されます:
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', // 絶対URLである必要があります
width: 800,
height: 600,
},
{
url: 'https://nextjs.org/og-alt.png', // 絶対URLである必要があります
width: 1800,
height: 1600,
alt: 'マイカスタムalt',
},
],
videos: [
{
url: 'https://nextjs.org/video.mp4', // 絶対URLである必要があります
width: 800,
height: 600,
},
],
audio: [
{
url: 'https://nextjs.org/audio.mp3', // 絶対URLである必要があります
},
],
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" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image" 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="マイカスタムalt" />
<meta property="og:video" content="https://nextjs.org/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
<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: true,
follow: true,
nocache: false,
googleBot: {
index: true,
follow: true,
noimageindex: false,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
}
<meta name="robots" content="index, follow" />
<meta
name="googlebot"
content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>
icons
補足: 可能な限り、ファイルベースのメタデータ 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"
/>
補足: Chromium ベースの Microsoft Edge では、
msapplication-*
メタタグはサポートされなくなったため、もはや必要ありません。
themeColor
非推奨: Next.js 14 現在、
metadata
のthemeColor
オプションは非推奨です。代わりにviewport
設定を使用してください。
colorScheme
Deprecated: Next.js 14では、
metadata
のcolorScheme
オプションは非推奨となりました。代わりにviewport
設定を使用してください。
manifest
Web Application Manifest 仕様で定義されているウェブアプリケーションマニフェスト。
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
}
<link rel="manifest" href="https://nextjs.org/manifest.json" />
twitter
(意外にも)X(以前の Twitter)以外にも使用される Twitter の仕様。
Twitter カードマークアップリファレンスについてさらに詳しく学ぶ。
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'], // 絶対 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
非推奨: Next.js 14 現在、
metadata
のviewport
オプションは非推奨です。代わりにviewport
設定を使用してください。
verification
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="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
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" />
archives
歴史的に興味深いレコード、ドキュメント、その他の資料のコレクションを説明します(出典)。
export const metadata = {
archives: ['https://nextjs.org/13'],
}
<link rel="archives" href="https://nextjs.org/13" />
assets
export const metadata = {
assets: ['https://nextjs.org/assets'],
}
<link rel="assets" href="https://nextjs.org/assets" />
bookmarks
export const metadata = {
bookmarks: ['https://nextjs.org/13'],
}
<link rel="bookmarks" href="https://nextjs.org/13" />
category
export const metadata = {
category: 'technology',
}
<meta name="category" content="technology" />
facebook
特定のFacebook ソーシャルプラグインのために、Facebook アプリまたはFacebookアカウントをウェブページに接続できます Facebook ドキュメント
補足: appIdまたはadminsのいずれかを指定できますが、両方は指定できません。
export const metadata = {
facebook: {
appId: '12345678',
},
}
<meta property="fb:app_id" content="12345678" />
export const metadata = {
facebook: {
admins: '12345678',
},
}
<meta property="fb:admins" content="12345678" />
複数のfb:adminsメタタグを生成する場合は、配列値を使用できます。
export const metadata = {
facebook: {
admins: ['12345678', '87654321'],
},
}
<meta property="fb:admins" content="12345678" />
<meta property="fb:admins" content="87654321" />
other
すべてのメタデータオプションは、組み込みのサポートでカバーされるはずです。ただし、サイト固有のカスタムメタデータタグや、新しくリリースされたメタデータタグがある場合があります。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="..."> | redirect() 、Middleware、Security Headersを介して適切なHTTPヘッダーを使用してください |
<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 '...'
}
<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/font
、next/image
、next/script
などのNext.jsの組み込み機能が、関連するリソースヒントを自動的に処理します。
型
Metadata
型を使用して、メタデータに型安全性を追加できます。IDEで組み込みのTypeScriptプラグインを使用している場合、手動で型を追加する必要はありませんが、明示的に追加することもできます。
metadata
オブジェクト
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: Promise<{ id: string }>
searchParams: Promise<{ [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',
}
ストリーミングメタデータ
v15.2から、generateMetadata
によって返されるメタデータはクライアントにストリーミングされるようになりました。これにより、Next.jsは解決されたメタデータをすぐにHTMLに挿入できるようになります。
ページのメタデータは主にボットやクローラーを対象としているため、Next.jsはHTML制限付きボットに対してメタデータが解決されるまでレンダリングをブロックし続けます。
Googlebot
のような一部のボットはJavaScriptを実行でき、完全なページDOMを検査できるため、メタデータのブロッキングを必要としません。しかし、Twitterbot
のようなボットはページをクロールする際にJavaScriptを実行できず、HTML制限付きカテゴリに分類されます。
Next.jsは、受信リクエストのユーザーエージェントを自動的に検出し、ストリーミングメタデータを提供するか、ブロッキングメタデータにフォールバックするかを判断します。
このリストをカスタマイズする必要がある場合は、next.config.js
のhtmlLimitedBots
オプションを使用して手動で定義できます。Next.jsはこの正規表現にマッチするユーザーエージェントに対して、ウェブページをリクエストする際にブロッキングメタデータを受信することを保証します。
htmlLimitedBots
設定を指定すると、Next.jsのデフォルトリストが上書きされ、どのユーザーエージェントがこの動作を選択すべきかを完全に制御できます。これは高度な動作であり、ほとんどの場合はデフォルト設定で十分です。
module.exports = {
htmlLimitedBots: 'MySpecialBot|MyAnotherSpecialBot|SimpleCrawler',
}
注意: Next.jsにはHTML制限付きボットのデフォルトリストが含まれています
バージョン履歴
バージョン | 変更内容 |
---|---|
導入時期:v15.2.0 | generateMetadata へのストリーミングサポートを導入。 |
導入時期:v13.2.0 | viewport 、themeColor 、およびcolorScheme はviewport 設定の導入により非推奨となりました。 |
導入時期:v13.2.0 | metadata とgenerateMetadata を導入。 |