ساخت Layout در App Router

ساخت Layout در App Router را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت 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 و ظاهر مشخص شود.

// app/layout.tsx
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="fa" dir="rtl">
      <body className="min-h-screen bg-slate-50 text-slate-900 antialiased">
        {children}
      </body>
    </html>
  );
}

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

Layout فارسی RTL با پس‌زمینه و Typography پایه.

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

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

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

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

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