إعداد أيقونات المواقع في Next.js

تتطلب الأطر الحديثة استراتيجيات حديثة للعلامات الوصفية. اضبط أيقونات متصفحك بشكل صحيح في Next.js.

الطريقة الأولى: Next.js App Router (واجهة برمجة تطبيقات البيانات الوصفية)

في Next.js الحديثة (الإصدار 13+ من App Router)، يمكنك وضع ملفات الأيقونات مباشرةً في المجلد الرئيسي لتطبيقك:

  • app/favicon.ico (تعيين تلقائي للنسخ القديمة)
  • app/icon.png (يُنشئ روابط favicon ديناميكيًا)
  • app/apple-icon.png (يُستخدم لأيقونات الشاشة الرئيسية لأجهزة Apple)

بدلاً من ذلك، يمكنك تعريف الأيقونات في ملف layout.js الرئيسي باستخدام واجهة برمجة تطبيقات البيانات الوصفية:

export const metadata = {
  title: 'My App',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

الطريقة الثانية: روابط Pages Router أو HTML

إذا كنت تستخدم Pages Router، فعدّل ملف _document.js الموجود داخل مجلد الصفحات وأضف إليه علامات التعريف القياسية:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}