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

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:

  • ビューポートがランタイム情報に依存しない場合は、generateMetadata ではなく、静的な 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" />

widthinitialScalemaximumScaleuserScalable

Good to know: viewport metaタグは、以下のデフォルト値で自動的に設定されます。通常、デフォルト値で十分であるため、手動で設定する必要はありません。しかし、完全を期すために情報を提供します。

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

segment props 付き

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

バージョン履歴

VersionChanges
v14.0.0viewportgenerateViewport が導入されました。