generateViewport

静的 viewport オブジェクトまたは動的 generateViewport 関数を使用して、ページの初期ビューポートをカスタマイズできます。

知っておくと便利:

viewport オブジェクトと generateViewport 関数のエクスポートは サーバーコンポーネント (Server Components) でのみサポート されています

同じルートセグメントから viewport オブジェクトと generateViewport 関数の両方をエクスポートすることはできません

metadata エクスポートからの移行を検討している場合、metadata-to-viewport-export codemod を使用して変更を更新できます

`viewport` オブジェクト

ビューポートオプションを定義するには、layout.jsx または page.jsx ファイルから viewport オブジェクトをエクスポートします。

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

export default function Page() {}

export const viewport = {
  themeColor: 'black',
}

export default function Page() {}

`generateViewport` 関数

generateViewport は、1つ以上のビューポートフィールドを含む Viewport オブジェクトを返す必要があります。

export function generateViewport({ params }) {
  return {
    themeColor: '...',
  }
}

export function generateViewport({ params }) {
  return {
    themeColor: '...',
  }
}

知っておくと便利:

ビューポートがランタイム情報に依存しない場合、generateMetadata ではなく静的 viewport オブジェクトを使用して定義する必要があります

ビューポートフィールド

`themeColor`

theme-color の詳細をご覧ください。

シンプルなテーマカラー

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

export const viewport = {
  themeColor: 'black',
}

<head> output

<meta name="theme-color" content="black" />

media属性付き

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

export const viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

<head> output

<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

`width`, `initialScale`, `maximumScale` および `userScalable`

知っておくと便利: viewport メタタグは自動的に設定され、デフォルトで十分なため通常は手動設定は不要です。ただし、完全性のために情報を提供しています。

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // あまり一般的ではないがサポートされているオプション
  // interactiveWidget: 'resizes-visual',
}

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // あまり一般的ではないがサポートされているオプション
  // interactiveWidget: 'resizes-visual',
}

<head> output

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

`colorScheme`

color-scheme の詳細をご覧ください。

import type { Viewport } from 'next'

export const viewport: Viewport = {
  colorScheme: 'dark',
}

export const viewport = {
  colorScheme: 'dark',
}

<head> output

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

型

Viewport 型を使用してビューポートオブジェクトに型安全性を追加できます。IDEで組み込みのTypeScriptプラグインを使用している場合、型を手動で追加する必要はありませんが、明示的に追加することも可能です。

`viewport` オブジェクト

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

`generateViewport` 関数

通常の関数

import type { Viewport } from 'next'

export function generateViewport(): Viewport {
  return {
    themeColor: 'black',
  }
}

セグメントプロパティ付き

import type { Viewport } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export function generateViewport({ params, searchParams }: Props): Viewport {
  return {
    themeColor: 'black',
  }
}

export default function Page({ params, searchParams }: Props) {}

JavaScriptプロジェクト

JavaScriptプロジェクトでは、JSDocを使用して型安全性を追加できます。

/** @type {import("next").Viewport} */
export const viewport = {
  themeColor: 'black',
}

バージョン履歴

バージョン	変更内容
`v14.0.0`	`viewport` と `generateViewport` が導入されました

メタデータファイル

メタデータファイル規約に関する API ドキュメント。

メタデータファイル

On this page