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

محمود سعداوي2 · السبت في 11:57

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

أريد إضافة 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 · السبت في 12:13

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

لإضافة 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 · السبت في 12:40

بتاريخ 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 · السبت في 12:42

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

للأسف أخي

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

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

محمود سعداوي2 · السبت في 13:03

بتاريخ 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 · السبت في 13:24

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية