generateViewport
静的なviewportオブジェクトまたは動的なgenerateViewport関数を使用して、ページの初期ビューポートをカスタマイズできます。
補足:
viewportオブジェクトとgenerateViewport関数のエクスポートは、サーバーコンポーネントでのみサポートされています。- 同じルートセグメントから
viewportオブジェクトとgenerateViewport関数の両方をエクスポートすることはできません。metadataエクスポートから移行する場合は、metadata-to-viewport-export codemodを使用して変更を更新できます。
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オブジェクトを返す必要があります。
layout.tsx
TypeScript
export function generateViewport({ params }) {
return {
themeColor: '...',
}
}補足:
- ビューポートが実行時の情報に依存しない場合は、
generateViewportではなく、静的な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" />メディア属性付き
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
補足: ビューポートのメタタグは自動的に設定され、デフォルトで十分であるため、通常は手動設定は不要です。しかし、完全を期すため情報を提供しています。
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" />型
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.0 | viewportとgenerateViewportが導入されました。 |
次のステップ
すべてのメタデータAPIオプションを表示。