Next.js میں Favicons کو ترتیب دینا

جدید فریم ورک کو جدید میٹا ٹیگ حکمت عملیوں کی ضرورت ہوتی ہے۔ Next.js میں اپنے براؤزر کے آئیکنز کو صحیح طریقے سے کنفیگر کریں۔

طریقہ 1: Next.js ایپ راؤٹر (میٹا ڈیٹا API)

جدید Next.js (ورژن 13+ ایپ راؤٹر) میں، آپ اپنی آئیکن فائلوں کو براہ راست اپنی ایپ ڈائرکٹری کے روٹ کے اندر رکھ سکتے ہیں:

  • app/favicon.ico (خودکار لیگیسی فال بیک میپنگ)
  • app/icon.png (فیویکن لنکس کو متحرک طور پر تیار کرتا ہے)
  • app/apple-icon.png (ایپل ہوم اسکرین آئیکنز کے لیے استعمال کیا جاتا ہے)

متبادل طور پر، آپ میٹا ڈیٹا API کا استعمال کرتے ہوئے اپنی روٹ layout.js فائل میں آئیکنز کا اعلان کر سکتے ہیں:

export const metadata = {
  title: 'میری ایپ',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

طریقہ 2: صفحات کے روٹر یا HTML لنکس

اگر آپ پیجز راؤٹر استعمال کر رہے ہیں تو پیجز ڈائرکٹری کے اندر اپنی _document.js فائل میں ترمیم کریں اور معیاری میٹا مارک اپ شامل کریں:

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

export default function Document() {
  return (
    <Html lang="ur">
      <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>
  )
}