メインコンテンツまでスキップ

generateViewport

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

Good to know:

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

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: '...',
  }
}

Good to know:

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

ビューポートフィールド​

themeColor​

theme-color についてさらに学ぶことができます。

シンプルなテーマカラー

layout.tsx | page.tsx
import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}
<head> output
<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> 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​

Good to know: viewport メタタグは自動的に設定されており、手動での設定は通常不要です。デフォルトで十分ですが、情報は完全性のために提供されています。

layout.tsx | page.tsx
import type { Viewport } from 'next'

export const viewport: 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 についてさらに学ぶことができます。

layout.tsx | page.tsx
import type { Viewport } from 'next'

export const viewport: 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',
  }
}

セグメント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',
}

バージョン履歴​

VersionChanges
v14.0.0viewport と generateViewport が導入されました。