generateViewport

Sayfanın ilk görünüm alanını statik viewport nesnesi veya dinamik generateViewport işlevi ile özelleştirebilirsiniz.

Bildiğim iyi oldu:

• viewport nesnesi ve generateViewport işlev dışa aktarımları yalnızca Sunucu Bileşenlerinde desteklenir.
• Aynı rota segmentinden hem viewport nesnesini hem de generateViewport işlevini dışa aktaramazsınız.
• metadata dışa aktarma işleminden geliyorsanız, değişikliklerinizi güncellemek için metadata-to-viewport-export codemod 'u kullanabilirsiniz.

The viewport object

Görüntü alanı seçeneklerini tanımlamak için, layout.js veya page.js dosyasından bir viewport nesnesini dışa aktarın.

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

generateViewport function

generateViewport bir veya daha fazla görünüm alanı içeren bir Viewport nesnesi döndürmelidir.

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

Bildiğim iyi oldu:

• Görünüm alanı çalışma zamanı bilgilerine bağlı değilse, generateMetadata yerine statik viewport nesnesi kullanılarak tanımlanmalıdır.

Viewport Fields

themeColor

Tema rengi hakkında daha fazla bilgi edinin .

Basit tema rengi

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

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

Medya özniteliği ile

export const viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

<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 and 'userScalable'

Bilmekte fayda var: viewport meta etiketi otomatik olarak aşağıdaki varsayılan değerlerle ayarlanır. Varsayılan değerler yeterli olduğundan genellikle manuel yapılandırma gereksizdir. Ancak, eksiksiz olması için bu bilgiler verilmiştir.

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: 1,
  // Also supported by less commonly used
  // interactiveWidget: 'resizes-visual',
}

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1"
/>

colorScheme

Hakkında daha fazla bilgi edinin color-scheme.

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

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

Types

Viewport türünü kullanarak viewport nesnenize tür güvenliği ekleyebilirsiniz. IDE'nizde yerleşik TypeScript eklentisini kullanıyorsanız, türü manuel olarak eklemenize gerek yoktur, ancak isterseniz yine de açıkça ekleyebilirsiniz.

viewport object

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}

generateViewport function

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 projelerinde, tip güvenliği eklemek için JSDoc kullanabilirsiniz.

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

Version History