コンテンツにスキップ
APIリファレンス関数generateViewport

generateViewport

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

知っておくと便利:

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

`viewport`オブジェクト

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

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

`generateViewport`関数

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

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

知っておくと便利:

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

ビューポートフィールド

`themeColor`

`theme-color` の詳細はこちらをご覧ください。

シンプルなテーマカラー

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

メディア属性を使用

layout.tsx | page.tsx
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`メタタグは自動的に設定されるため、デフォルトで十分なため、手動設定は通常不要です。ただし、情報は完全を期すために提供されています。

layout.tsx | page.tsx
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported by less commonly used
  // 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 | page.tsx
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  colorScheme: 'dark',
}
<head>出力
<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.0viewport と generateViewport が導入されました。

次のステップ

すべてのメタデータ API オプションを表示します。

メタデータファイル

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

メタデータ

メタデータ API を使用して、任意のレイアウトまたはページでメタデータを定義します。