- معرفی
- مشکل
- راه حل
- نتیجه
معرفی
هنگام کار با Next.js، معمولاً در طول مسیر با برخی مشکلات فنی مواجه می شوید. یکی از چنین مشکلاتی که می تواند ایجاد شود دوگانگی تگ viewport است. هدف این مقاله این است که با ارائه راه حلی برای حل مشکل viewport تکراری در اجزا در Next.js 13 به طور خاص به این مشکل بپردازد.
مشکل
قبل از ارائه راه حل، بسیار مهم است که ابتدا مشکل موجود را درک کنیم. با استفاده از تگ viewport به طور مستقیم در کد، مانند شکل زیر:
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body className={inter.className}>{children}</body>
</html>
)
}
راه حل
برای حل این مشکل، باید نحوه تعریف ویوپورت را تغییر دهیم. به جای قرار دادن مستقیم آن در کد، باید آن را در متادیتا مشخص کنیم.
راه حل در یک رشته در StackOverflow کشف و مستند شد.
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1', // <-- now here
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
نتیجه
در دنیای توسعه نرم افزار، ما اغلب با چالش های فنی روبرو هستیم. این چالش ها در نگاه اول می توانند دلهره آور به نظر برسند، اما با قدرت جامعه توسعه و تبادل مداوم دانش، راه حل اغلب فقط یک پست با شما فاصله دارد.
