- معرفی
- مشکل
- راه حل
- نتیجه
معرفی
هنگام کار با 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>
)
}
نتیجه
در دنیای توسعه نرم افزار، ما اغلب با چالش های فنی مواجه می شویم. این چالش ها ممکن است در نگاه اول دلهره آور به نظر برسند، اما با قدرت جامعه توسعه و تبادل مداوم دانش، راه حل اغلب فقط یک پست با شما فاصله دارد.
