إضافة favicon في مشروع next

محمود سعداوي2 · 29 يونيو 2024

السلام عليكم.

أريد إضافة favicon في تطبيق next

الكود:

layout.jsx

import React from 'react'
import '@/assets/styles/globals.css'

export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
    icons: {
        icon: "/assets/images/ico.png",
    },
}

const MainLayout = ({ children }) => {
  return (
    <html lang='en'>
        <body>
            <div>{children}</div>
        </body>
    </html>
  )
}

export default MainLayout

تموضع ملفات المشروع:

Capture.JPG.f1220fe3d8ee0ddb769402378b660dbc.JPG

شكرا

محمد عاطف17 · 29 يونيو 2024

وعليكم السلام ورحمة الله وبركاته .

لإضافة favicon في تطبيق Next.js يجب وضعها بداخل ال head مع إضافة عنصر link ويحوي خاصية rel تساوي قيمة icon في ملف ال layout.jsx لديك هكذا :

import React from 'react';
import '@/assets/styles/globals.css';

export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
    icons: {
        icon: "/assets/images/ico.png",
    },
};

const MainLayout = ({ children }) => {
    return (
        <html lang='en'>
            <head>
                <link rel="icon" href={metadata.icons.icon} />
                <title>{metadata.title}</title>
                <meta name="description" content={metadata.description} />
                <meta name="keywords" content={metadata.keywords} />
            </head>
            <body>
                <div>{children}</div>
            </body>
        </html>
    );
}

export default MainLayout;

الآن أعد تشغيل السيرفر مرة أخر وستظهر معك إن شاء الله

محمود سعداوي2 · 29 يونيو 2024

بتاريخ 27 دقائق مضت قال محمد عاطف17:
وعليكم السلام ورحمة الله وبركاته .

لإضافة favicon في تطبيق Next.js يجب وضعها بداخل ال head مع إضافة عنصر link ويحوي خاصية rel تساوي قيمة icon في ملف ال layout.jsx لديك هكذا :
import React from 'react';
import '@/assets/styles/globals.css';

export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
    icons: {
        icon: "/assets/images/ico.png",
    },
};

const MainLayout = ({ children }) => {
    return (
        <html lang='en'>
            <head>
                <link rel="icon" href={metadata.icons.icon} />
                <title>{metadata.title}</title>
                <meta name="description" content={metadata.description} />
                <meta name="keywords" content={metadata.keywords} />
            </head>
            <body>
                <div>{children}</div>
            </body>
        </html>
    );
}

export default MainLayout;
الآن أعد تشغيل السيرفر مرة أخر وستظهر معك إن شاء الله

للأسف أخي

محمد عاطف17 · 29 يونيو 2024

بتاريخ 1 دقيقة مضت قال محمود سعداوي2:

للأسف أخي

هل يمكنك عمل inspect للصفحة وإرسال صورة لجزء ال head لنري هل يتم وضعها أم لا .

وأيضا لقسم ال network لنري هل يتم وضعها ولكن لا يجد الصورة على السيرفر أم لا

محمود سعداوي2 · 29 يونيو 2024

بتاريخ 17 دقائق مضت قال محمد عاطف17:

هل يمكنك عمل inspect للصفحة وإرسال صورة لجزء ال head لنري هل يتم وضعها أم لا .

وأيضا لقسم ال network لنري هل يتم وضعها ولكن لا يجد الصورة على السيرفر أم لا

الحل هو إضافة icon.png في ملف app ثم يقع إدراجها مباشرة

Capture.JPG.88fc51cfa0da44cd33d38263a3b2e97e.JPG

الكود

import React from 'react'
import '@/assets/styles/globals.css'

export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
}

const MainLayout = ({ children }) => {
  return (
    <html lang='en'>
        <body>
            <div>{children}</div>
        </body>
    </html>
  )
}

export default MainLayout

شكرا

محمد عاطف17 · 29 يونيو 2024

بتاريخ 20 دقائق مضت قال محمود سعداوي2:

الحل هو إضافة icon.png في ملف app ثم يقع إدراجها مباشرة

نعم بالفعل next أصبح يكتشف الصورة إذا كانت بداخل المجلد app ولكن هذا ليس حلا جيدا .

الحل السابق والذى قمت بكتابه أنت أولا صحيح ولكن لم ألحظ أنك تضع ال icon في مجلد غير ال public .

يمكنك تجربة الحل التالي :

قم بنقل الصورة إلى مجلد public وأستخدم الكود التالي :

import React from 'react';
import '@/assets/styles/globals.css';

export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
    icons: {
    icon: '/icon.png', 
  },
};

const MainLayout = ({ children }) => {
    return (
        <html lang='en'>
            <body>
                <div>{children}</div>
            </body>
        </html>
    );
}

export default MainLayout;

حيث أن next في ال metadata يبحث المسار من المجلد public . وإذا كنت نظرت سابقا في ال inspect ستجد أنه بالفعل وضع الصورة ولكن المسار خاطئ والملف غير موجود.

ويمكنك إستخدام الكود التالي أيضا :

import React from 'react';
import '@/assets/styles/globals.css';
import Favicon from '/public/icon.png';
export const metadata = {
    title: 'Property Pulse',
    description: 'Find your dream rental property',
    keywords: 'rental, find rentals, property, find properties',
    icons: [{ rel: 'icon', url: Favicon.src }],
};

إضافة favicon في مشروع next

السؤال

محمود سعداوي2

5 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

محمود سعداوي2

محمد عاطف17

محمود سعداوي2

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية