Image، Link و Responsive UI

Image، Link و Responsive UI را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

در Next.js App Router، Style عمومی در Root Layout وارد می‌شود و ساختار html، lang و dir همان‌جا تعریف می‌گردد. Image و Link قابلیت‌های بهینه‌سازی و Navigation فریم‌ورک را حفظ می‌کنند و کلاس‌ها ظاهر Responsive را کنترل می‌کنند.

روش پیاده‌سازی

1. globals.css را در Root Layout وارد کنید.
2. lang و dir و Style پایه body را تعیین کنید.
3. برای تصویر ابعاد، alt و object-fit و برای Link مقصد واقعی تعریف کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

import Image from "next/image";
import Link from "next/link";

export function TutorialCard() {
  return (
    <Link href="/tutorials/tailwind-css" className="group overflow-hidden rounded-2xl border bg-white">
      <Image src="/tailwind.webp" alt="Tailwind CSS" width={1200} height={900}
        className="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]" />
      <div className="p-5 font-bold">آموزش جامع Tailwind CSS</div>
    </Link>
  );
}

خروجی مورد انتظار

Card آموزش با Image بهینه و Hover ملایم.

نکات مهم و خطاهای رایج

• استفاده از img به‌جای Image می‌تواند بهینه‌سازی تصویر را از بین ببرد.
• Layout نباید به API مرورگر وابسته و ناخواسته Client Component شود.

تمرین پیشنهادی

Card مثال را با تصویر موبایل و Focus قابل مشاهده کامل کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS