Menu

generateViewport

ページの初期viewportをstatic viewport オブジェクトまたはdynamic generateViewport 関数でカスタマイズできます。

補足：

  • viewport オブジェクトと generateViewport 関数のエクスポートは、Server Componentsでのみサポートされています。
  • 同じrouteセグメントから viewport オブジェクトと generateViewport 関数の両方をエクスポートすることはできません。
  • metadata エクスポートからの移行を行う場合は、metadata-to-viewport-export codemodを使用して変更を更新できます。

viewport オブジェクト

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

layout.tsx
TypeScript
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}
 
export default function Page() {}

generateViewport 関数

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

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

TypeScriptでは、params 引数を PageProps<'/route'> または LayoutProps<'/route'> を使用して型定義できます。generateViewport が定義されている場所に応じて選択してください。

補足：

  • viewportがruntimeの情報に依存しない場合は、generateViewport ではなく、staticの viewport オブジェクトを使用して定義する必要があります。

Viewportフィールド

themeColor

theme-colorについて詳しく知る。

シンプルなテーマカラー

layout.tsx
TypeScript
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}
<head>
<meta name="theme-color" content="black" />

mediaアトリビュート付き

layout.tsx
TypeScript
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}
<head>
<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 metaタグは自動的に設定され、デフォルト値で十分であるため、手動での設定は通常不要です。ただし、完全性のため情報を提供しています。

layout.tsx
TypeScript
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // サポートされていますが、あまり使用されません
  // interactiveWidget: 'resizes-visual',
}
<head>
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

colorScheme

color-schemeについて詳しく知る。

layout.tsx
TypeScript
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  colorScheme: 'dark',
}
<head>
<meta name="color-scheme" content="dark" />

型

Viewport 型を使用して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',
  }
}

セグメントprops付き

import type { Viewport } from 'next'
 
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [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.0viewport および generateViewport 導入時期：v14.0.0。

次のステップ

すべてのMetadata APIオプションを表示。

メタデータファイル

メタデータファイル規約のAPIドキュメント。