الصور والخطوط

الدرس 18 من 25· ⏱ 1 دقائق قراءة

next/image

يحسّن الصور تلقائيًا: أحجام متجاوبة، تحميل كسول، صيغ حديثة (WebP):

import Image from "next/image";

<Image
  src="/hero.png"
  alt="وصف الصورة"
  width={800}
  height={400}
  priority         // للصور المهمّة فوق الطيّة
/>

💡 alt مهمّ للوصول و SEO. priority للصورة الرئيسية فقط.

الصور الخارجية

اسمح بالنطاقات في next.config.ts:

images: {
  remotePatterns: [{ protocol: "https", hostname: "cdn.example.com" }],
}

next/font

يحمّل الخطوط محلّيًا بلا طلبات خارجية ويمنع تغيّر التخطيط:

import { Cairo } from "next/font/google";

const cairo = Cairo({ subsets: ["arabic"], display: "swap" });

<html className={cairo.className}>

خطّ Cairo ممتاز للعربية.

🎯 التالي: معالِجات المسارات (API).

هل كان هذا الدرس مفيدًا؟