نحوه استفاده از app router در Next.js و فایل manifest.json

در ابتدا باید اشاره کنم که Next.js یکی از فریم‌ورک‌های پرقدرت و محبوب برای ساخت وب‌اپلیکیشن‌های سمت سرور است که روی React ساخته شده است. یکی از امکانات جالب این فریم‌ورک App Router است که به شما امکان می‌دهد به سادگی مسیرهای اپلیکیشن خود را مدیریت کنید. در نسخه‌های جدید Next.js، از امکانات file-based routing که با استفاده از دایرکتوری ‘pages’ شکل می‌گیرد، استفاده می‌شود.

حال فرض کنید که شما قصد دارید یک فایل manifest.json برای اپلیکیشن خود تعریف کنید. این فایل به مرورگرها اطلاعاتی درباره اپلیکیشن شما می‌دهد و معمولا برای progressive web apps (PWA) استفاده می‌شود. اطلاعاتی مانند نام اپلیکیشن، آیکون‌ها، رنگ تم و غیره در این فایل ذخیره می‌شوند.

در تنظیمات router در Next.js، شما می‌توانید با استفاده از یک چهارتا از ویژگی‌های ساده، مسیرها را به راحتی تعیین کنید و بسازید. به علاوه، وقتی از manifest.json استفاده می‌کنید به کاربران یک تجربه بهتر و بومی‌سازی شده ارائه می‌دهید که باعث می‌شود آن‌ها حس کنند در حال کار با یک اپلیکیشن نصب شده هستند، نه یک وب‌سایت ساده.

برای اینکه اپلیکیشن شما قابلیت‌های PWA را داشته باشد، شما باید فایل manifest.json را به پروژه خود اضافه کنید و در فایل root یا public قرار دهید. پس از آن می‌توانید کامپوننت Head را در فایل‌های خود استفاده کنید تا این فایل شناسایی شود.

نحوه ساخت manifest.json

اول از همه یک فایل به نام manifest.json در دایرکتوری public اپلیکیشن خود ایجاد کنید. سپس محتوای زیر را داخل آن کپی کنید. این محتوا شامل اطلاعات پایه‌ای است که برای پیکربندی فایل manifest استفاده می‌شود:

{
    "name": "My Next.js App",
    "short_name": "MyApp",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
    

توضیح خط به خط کد

name - نام کامل اپلیکیشن شما می‌باشد که زمانی که نصب شود مشاهده می‌شود.
short_name - نام کوتاه‌تری از اپلیکیشن به منظور نمایش بر روی صفحه اصلی یا لیست اپلیکیشن‌ها.
start_url - URL پیش‌فرضی که پس از نصب اپلیکیشن باز می‌شود.
display - روش نمایش اپلیکیشن بعد از نصب است؛ مانند standalone که اپلیکیشن را مانند یک اپ اصلی اجرا می‌کند.
background_color - رنگ پس‌زمینه ابتدایی وقتی که اپ باز می‌شود.
theme_color - رنگ تم اصلی اپلیکیشن که در اجزای مختلف UI نمایان می‌شود.
icons - آرایه‌ای از آیکون‌ها با سایز‌ها و نوع‌های مختلف که برای نمایش‌های مختلف استفاده می‌شود.