۱. انواع آیکونها در Next.js
Next.js از سه نوع آیکون پشتیبانی میکند:
- favicon: برای تب مرورگر
- icon: برای آیکون عمومی اپلیکیشن
- apple-icon: برای صفحه اصلی دستگاههای اپل
۲. روشهای تنظیم آیکون
دو روش برای تنظیم آیکون وجود دارد:
- استفاده از فایل تصویری (.ico، .jpg، .png)
- تولید آیکون با کد (.js، .ts، .tsx)
۳. استفاده از فایل تصویری
| نوع فایل | فرمتهای پشتیبانیشده | محل معتبر |
|---|---|---|
| favicon | .ico | فقط در app/ |
| icon | .ico، .jpg، .png، .svg | در هر مسیر داخل app |
| apple-icon | .jpg، .png | در هر مسیر داخل app |
نمونه خروجی در <head>:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon?...generated" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-icon?...generated" type="image/png" sizes="180x180" />۴. تولید آیکون با کد
برای تولید آیکون با کد، از API ImageResponse در next/og استفاده کنید:
// app/icon.tsx
import { ImageResponse } from 'next/og'
export const size = { width: 32, height: 32 }
export const contentType = 'image/png'
export default function Icon() {
return new ImageResponse(
<div style={{
fontSize: 24,
background: 'black',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}>
A
</div>,
{ ...size }
)
}نکات مهم:
- آیکونهای تولیدشده بهصورت پیشفرض در زمان build بهینهسازی و کش میشوند
- نمیتوان favicon را با کد تولید کرد — فقط با فایل .ico
- میتوان چند آیکون را با پسوند عددی مانند icon1.png، icon2.png تعریف کرد
۵. پارامترهای ورودی و خروجی
تابع export شده میتواند پارامترهای داینامیک مسیر را دریافت کند:
export default async function Icon({ params }) {
const { slug } = await params
}خروجی تابع باید یکی از انواع زیر باشد:
- Blob
- ArrayBuffer
- TypedArray
- ReadableStream
- Response
۶. تنظیمات متادیتا
میتوانید متادیتای آیکون را با export کردن متغیرهای زیر تنظیم کنید:
export const size = { width: 32, height: 32 }
export const contentType = 'image/png'جمعبندی
Next.js با پشتیبانی از فایلهای تصویری و تولید آیکون با کد، امکان تنظیم آیکونهای اپلیکیشن را بهصورت منعطف فراهم میکند. با استفاده از conventions مناسب و APIهای قدرتمند، میتوانید تجربه کاربری حرفهای و قابل شخصیسازی برای اپلیکیشن خود بسازید.