︙

generateViewport

ページの初期の viewport は、静的なviewportの object または dynamic なgenerateViewport関数を用いてカスタマイズすることができます。

Good to know:

viewport object とgenerateViewport関数の export はServer Components でのみサポートされています。

あなたは同じ route セグメントから、viewport object と generateViewport 関数の両方を export することはできません。

metadataexport の移行から来ている場合、metadata-to-viewport-export codemodを使用して変更を更新できます。

The `viewport` object

viewport options を定義するには、layout.jsxまたはpage.jsxファイルからviewport object を export します。

layout.tsx

import type { Viewport } from 'next'

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

export default function Page() {}

layout.jsx

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

export default function Page() {}

`generateViewport` function

generateViewportは、一つ以上の viewport フィールドを含むViewport objectを返すべきです。

layout.tsx

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

layout.js

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

Good to know:

viewport が runtime 情報に依存しない場合、generateMetadataではなく、静的なviewport objectを使用して定義するべきです。

Viewport Fields

`themeColor`

theme-color についてもっと学びましょう。

シンプルなテーマカラー

layout.tsx

import type { Viewport } from 'next'

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

layout.jsx

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

<head>

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

メディア属性と共に

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

layout.jsx

export const 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`

Good to know： viewportの meta タグは、次の“ default の値で自動的に設定されます。通常、 default が十分であるため、手動での設定は不要です。ただし、完全性のために情報が提供されています。

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

layout.jsx

export const 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

import type { Viewport } from 'next'

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

layout.jsx

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

<head>

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

Types

Viewport type を使用することで、ご自身の viewport object に type の安全性を追加することができます。もし、ご自身の IDE でビルトインの TypeScript pluginを使用している場合、手動で type を追加する必要はありませんが、もし必要であれば明示的に追加することもできます。

`viewport` object

import type { Viewport } from "next";

export const viewport: Viewport = {
  themeColor: "black",
};

`generateViewport` 関数

Regular function

import type { Viewport } from "next";

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

With 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 Projects

JavaScript のプロジェクトには、JSDoc を使用して type の安全性を追加することができます。

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

Version History

Version	Changes
`v14.0.0`	`viewport`と`generateViewport`が導入されました。