۱. 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.