تحسين الخطوط والصور
في الفصل السابق، تعلمت كيفية تنسيق تطبيق Next.js الخاص بك. دعونا نواصل العمل على الصفحة الرئيسية بإضافة خط مخصص وصورة رئيسية.
لماذا نُحسّن الخطوط؟
تلعب الخطوط دورًا مهمًا في تصميم الموقع، ولكن استخدام خطوط مخصصة في مشروعك يمكن أن يؤثر على الأداء إذا كان يجب جلب ملفات الخطوط وتحميلها.
الانزياح التراكمي للتصميم (CLS) هو مقياس تستخدمه جوجل لتقييم أداء الموقع وتجربة المستخدم. بالنسبة للخطوط، يحدث الانزياح عندما يعرض المتصفح النص في البداية باستخدام خط احتياطي أو نظامي ثم يستبدله بخط مخصص بمجرد تحميله. هذا الاستبدال يمكن أن يتسبب في تغيير حجم النص، التباعد، أو التصميم، مما يؤدي إلى تحريك العناصر المحيطة.
يقوم Next.js بتحسين الخطوط تلقائيًا في التطبيق عند استخدام وحدة next/font. حيث يقوم بتحميل ملفات الخطوط أثناء بناء التطبيق ويستضيفها مع باقي الأصول الثابتة. هذا يعني أنه عندما يزور المستخدم تطبيقك، لن تكون هناك طلبات شبكة إضافية للخطوط مما قد يؤثر على الأداء.
إضافة خط رئيسي
دعونا نضيف خط جوجل مخصص إلى تطبيقك لرؤية كيفية عمل هذا.
في مجلد /app/ui، أنشئ ملفًا جديدًا باسم fonts.ts. ستستخدم هذا الملف لحفظ الخطوط التي سيتم استخدامها في جميع أنحاء التطبيق.
قم باستيراد خط Inter من وحدة next/font/google - سيكون هذا خطك الرئيسي. ثم حدد المجموعة الفرعية التي تريد تحميلها. في هذه الحالة، 'latin':
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });أخيرًا، أضف الخط إلى عنصر <body> في /app/layout.tsx:
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}بإضافة Inter إلى عنصر <body>، سيتم تطبيق الخط في جميع أنحاء التطبيق. هنا، تقوم أيضًا بإضافة فئة Tailwind antialiased التي تنعم مظهر الخط. ليس من الضروري استخدام هذه الفئة، لكنها تضيف لمسة جميلة.
انتقل إلى متصفحك، افتح أدوات المطور وحدد عنصر body. يجب أن ترى أن Inter و Inter_Fallback مطبقان الآن تحت الأنماط.
تمرين: إضافة خط ثانوي
يمكنك أيضًا إضافة خطوط إلى عناصر محددة في تطبيقك.
الآن حان دورك! في ملف fonts.ts، قم باستيراد خط ثانوي باسم Lusitana ومرره إلى عنصر <p> في ملف /app/page.tsx. بالإضافة إلى تحديد مجموعة فرعية كما فعلت سابقًا، يجب أيضًا تحديد أوزان مختلفة للخط. على سبيل المثال، 400 (عادي) و 700 (غامق).
عندما تكون جاهزًا، قم بتوسيع مقتطف الكود أدناه لرؤية الحل.
تلميحات:
- إذا كنت غير متأكد من خيارات الوزن التي يجب تمريرها للخط، تحقق من أخطاء TypeScript في محرر الأكواد.
- قم بزيارة موقع جوجل للخطوط وابحث عن
Lusitanaلرؤية الخيارات المتاحة.- راجع وثائق إضافة خطوط متعددة و القائمة الكاملة للخيارات.
أخيرًا، مكون <AcmeLogo /> يستخدم أيضًا Lusitana. كان معطلًا لمنع حدوث أخطاء، يمكنك الآن تفعيله:
// ...
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
<AcmeLogo />
{/* ... */}
</div>
</main>
);
}رائع، لقد أضفت خطين مخصصين إلى تطبيقك! بعد ذلك، دعونا نضيف صورة رئيسية إلى الصفحة الرئيسية.
لماذا نُحسّن الصور؟
يمكن لـ Next.js تقديم أصول ثابتة، مثل الصور، تحت مجلد /public الرئيسي. يمكن الإشارة إلى الملفات داخل /public في تطبيقك.
مع HTML العادي، يمكنك إضافة صورة كما يلي:
<img
src="/hero.png"
alt="لقطات شاشة لمشروع لوحة التحكم تظهر نسخة سطح المكتب"
/>ومع ذلك، هذا يعني أنه يجب عليك يدويًا:
- التأكد من أن صورتك متجاوبة مع أحجام الشاشات المختلفة.
- تحديد أحجام الصور لأجهزة مختلفة.
- منع الانزياح في التصميم أثناء تحميل الصور.
- تحميل الصور خارج نطاق رؤية المستخدم بشكل متأخر.
تحسين الصور موضوع كبير في تطوير الويب يمكن اعتباره تخصصًا بحد ذاته. بدلاً من تنفيذ هذه التحسينات يدويًا، يمكنك استخدام مكون next/image لتحسين صورك تلقائيًا.
مكون <Image>
مكون <Image> هو امتداد لوسم <img> في HTML، ويأتي مع تحسين تلقائي للصور، مثل:
- منع الانزياح في التصميم تلقائيًا أثناء تحميل الصور.
- تغيير حجم الصور لتجنب إرسال صور كبيرة إلى أجهزة بشاشة عرض أصغر.
- تحميل الصور بشكل متأخر افتراضيًا (يتم تحميل الصور عند دخولها نطاق الرؤية).
- تقديم الصور بصيغ حديثة، مثل WebP و AVIF، عندما يدعم المتصفح ذلك.
إضافة صورة سطح المكتب الرئيسية
دعونا نستخدم مكون <Image>. إذا نظرت داخل مجلد /public، ستجد صورتين: hero-desktop.png و hero-mobile.png. هاتان الصورتان مختلفتان تمامًا، وسيتم عرضهما اعتمادًا على ما إذا كان جهاز المستخدم سطح مكتب أم هاتف محمول.
في ملف /app/page.tsx، قم باستيراد المكون من next/image. ثم أضف الصورة تحت التعليق:
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
export default function Page() {
return (
// ...
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* أضف الصور الرئيسية هنا */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="لقطات شاشة لمشروع لوحة التحكم تظهر نسخة سطح المكتب"
/>
</div>
//...
);
}هنا، تقوم بتعيين width إلى 1000 و height إلى 760 بكسل. من الممارسات الجيدة تعيين width و height للصور لتجنب الانزياح في التصميم، يجب أن تكون هذه النسب مطابقة تمامًا للصورة الأصلية. هذه القيم ليست حجم عرض الصورة، بل حجم ملف الصورة الفعلي المستخدم لفهم نسبة العرض إلى الارتفاع.
ستلاحظ أيضًا الفئة hidden لإزالة الصورة من DOM على شاشات الهاتف، و md:block لعرض الصورة على شاشات سطح المكتب.
هذا ما يجب أن تبدو عليه صفحتك الرئيسية الآن:
تمرين: إضافة صورة الهاتف الرئيسية
الآن حان دورك! تحت الصورة التي أضفتها للتو، أضف مكون <Image> آخر لـ hero-mobile.png.
- يجب أن يكون للصورة
widthبقيمة560وheightبقيمة620بكسل. - يجب عرضها على شاشات الهاتف وإخفاؤها على سطح المكتب - يمكنك استخدام أدوات المطور للتحقق من تبديل الصور بين سطح المكتب والهاتف بشكل صحيح.
عندما تكون جاهزًا، قم بتوسيع مقتطف الكود أدناه لرؤية الحل.
رائع! الآن تحتوي صفحتك الرئيسية على خط مخصص وصور رئيسية.
قراءات مقترحة
هناك المزيد لتعلمه حول هذه المواضيع، بما في ذلك تحسين الصور البعيدة واستخدام ملفات الخطوط المحلية. إذا كنت ترغب في التعمق أكثر في الخطوط والصور، راجع: