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

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

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

أريد إضافة 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 يونيو

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

لإضافة 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 يونيو

بتاريخ 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 يونيو

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

للأسف أخي

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

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

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

بتاريخ 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 يونيو

بتاريخ 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية