الصور والخطوط والبيانات الوصفية

// استبدال جميع صور img بمكون next/image
import Image from "next/image";

// صورة محلية
<Image
  src="/images/photo.jpg"
  width={500}
  height={300}
  alt="وصف الصورة"
/>

// صورة في أعلى الصفحة مع priority
<Image
  src="/images/hero.jpg"
  width={1200}
  height={600}
  alt="صورة رئيسية"
  priority
/>

// صورة ملء الحاوية
<div className="relative w-full h-64">
  <Image
    src="/images/cover.jpg"
    alt="غلاف"
    fill
    className="object-cover"
    sizes="100vw"
  />
</div>

// خط من next/font
import { Cairo } from "next/font/google";
const cairo = Cairo({
  subsets: ["arabic", "latin"],
  variable: "--font-cairo",
});

// Metadata ثابتة
export const metadata = {
  title: "الصفحة الرئيسية - موقعي",
  description: "مرحباً بكم في موقعنا",
  openGraph: {
    title: "موقعي",
    description: "موقع تعليمي",
    images: ["/og-image.jpg"],
  },
};

// Metadata ديناميكية
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}