generateViewport
يمكنك تخصيص منفذ العرض الأولي للصفحة باستخدام كائن viewport الثابت أو وظيفة generateViewport الديناميكية.
معلومة مفيدة:
- تصديرات كائن
viewportووظيفةgenerateViewportمدعومة فقط في مكونات الخادم (Server Components).- لا يمكنك تصدير كائن
viewportووظيفةgenerateViewportمن نفس مقطع المسار.- إذا كنت تقوم بالترحيل من تصديرات
metadata، يمكنك استخدام أداة metadata-to-viewport-export codemod لتحديث التغييرات الخاصة بك.
كائن viewport
لتحديد خيارات منفذ العرض، قم بتصدير كائن viewport من ملف layout.jsx أو page.jsx.
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}
export default function Page() {}export const viewport = {
themeColor: 'black',
}
export default function Page() {}وظيفة generateViewport
يجب أن تُرجع generateViewport كائن Viewport يحتوي على حقل واحد أو أكثر من حقول منفذ العرض.
export function generateViewport({ params }) {
return {
themeColor: '...',
}
}export function generateViewport({ params }) {
return {
themeColor: '...',
}
}معلومة مفيدة:
- إذا كان منفذ العرض لا يعتمد على معلومات وقت التشغيل، فيجب تحديده باستخدام كائن
viewportالثابت بدلاً منgenerateViewport.
حقول منفذ العرض
themeColor
تعرف على المزيد حول theme-color.
لون المظهر البسيط
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}export const viewport = {
themeColor: 'black',
}<meta name="theme-color" content="black" />مع سمة media
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
}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 و userScalable
معلومة مفيدة: يتم تعيين وسم meta
viewportتلقائيًا، وعادةً لا تكون هناك حاجة للتكوين اليدوي لأن الإعدادات الافتراضية كافية. ومع ذلك، يتم توفير المعلومات للاكتمال.
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// مدعوم أيضًا ولكن أقل استخدامًا
// interactiveWidget: 'resizes-visual',
}export const viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// مدعوم أيضًا ولكن أقل استخدامًا
// interactiveWidget: 'resizes-visual',
}<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>colorScheme
تعرف على المزيد حول color-scheme.
import type { Viewport } from 'next'
export const viewport: Viewport = {
colorScheme: 'dark',
}export const viewport = {
colorScheme: 'dark',
}<meta name="color-scheme" content="dark" />الأنواع
يمكنك إضافة أمان النوع إلى كائن منفذ العرض الخاص بك باستخدام النوع Viewport. إذا كنت تستخدم الإضافة المدمجة لـ 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: 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',
}سجل الإصدارات
| الإصدار | التغييرات |
|---|---|
v14.0.0 | تم تقديم viewport و generateViewport. |