manifest.json در Next.js — تعریف اطلاعات اپلیکیشن برای مرورگرها

۱. manifest چیست؟

فایل manifest.json یا manifest.webmanifest اطلاعاتی دربارهٔ اپلیکیشن شما به مرورگر ارائه می‌دهد — مانند نام، آیکون، رنگ‌ها، و نحوهٔ اجرا در حالت مستقل (standalone). این فایل برای پشتیبانی از Progressive Web App (PWA) ضروری است.

۲. روش‌های تعریف manifest

دو روش برای تعریف فایل manifest وجود دارد:

فایل استاتیک: در مسیر app/manifest.json یا app/manifest.webmanifest
تولید با کد: در فایل app/manifest.ts یا app/manifest.js

۳. نمونه فایل استاتیک

// app/manifest.json
{
  "name": "My Next.js Application",
  "short_name": "Next.js App",
  "description": "An application built with Next.js",
  "start_url": "/"
}

۴. تولید manifest با کد

برای تولید فایل manifest با کد، از نوع MetadataRoute.Manifest استفاده کنید:

// app/manifest.ts
import type { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js App',
    short_name: 'Next.js App',
    description: 'Next.js App',
    start_url: '/',
    display: 'standalone',
    background_color: '#fff',
    theme_color: '#fff',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
    ],
  }
}

۵. گزینه‌های پشتیبانی‌شده در manifest

فایل manifest می‌تواند شامل گزینه‌های زیر باشد:

name: نام کامل اپلیکیشن
short_name: نام کوتاه برای نمایش در آیکون
description: توضیح دربارهٔ اپلیکیشن
start_url: مسیر شروع اپلیکیشن
display: حالت نمایش (مثلاً standalone)
background_color: رنگ پس‌زمینه
theme_color: رنگ تم
icons: لیست آیکون‌ها با مسیر، سایز و نوع

۶. نکات مهم

فایل manifest باید در ریشهٔ پوشه app قرار گیرد
نسخهٔ کدی manifest به‌صورت پیش‌فرض کش می‌شود مگر اینکه از API داینامیک استفاده کند
برای مشاهده گزینه‌های کامل، از TypeScript و نوع MetadataRoute.Manifest استفاده کنید یا به مستندات MDN مراجعه کنید

جمع‌بندی

فایل manifest.json در Next.js نقش کلیدی در تعریف رفتار و ظاهر اپلیکیشن در مرورگر دارد. چه به‌صورت استاتیک و چه داینامیک، این فایل به شما امکان می‌دهد تجربه‌ای حرفه‌ای و قابل نصب برای کاربران بسازید — مخصوصاً در اپلیکیشن‌های PWA.