# ساخت Layout در Next.js و جلوگیری از تکرار کد
در بسیاری از پروژه‌های وب، بخش‌هایی مانند Header، Footer یا Sidebar در چندین صفحه تکرار می‌شوند. اگر این بخش‌ها را در هر صفحه جداگانه بنویسیم، هم کد پروژه بیشتر می‌شود و هم تغییر دادن آن‌ها سخت‌تر خواهد شد.
Next.js با استفاده از Layout راه ساده‌ای برای مدیریت این بخش‌های مشترک در اختیار ما قرار می‌دهد.
## Layout در Next.js چیست؟
Layout یک ساختار مشترک برای چند صفحه است.
برای مثال فرض کنید یک سایت داریم که بیشتر صفحات آن این ساختار را دارند:
```text
Header
──────
محتوای صفحه
──────
Footer
```
به جای اینکه Header و Footer را در تمام صفحات تکرار کنیم، می‌توانیم آن‌ها را داخل یک layout.tsx قرار دهیم.
## ساخت یک Layout ساده
در پروژه‌ای که از App Router استفاده می‌کند، می‌توانیم یک layout.tsx داخل پوشه app داشته باشیم:
```text
app/
├── layout.tsx
├── page.tsx
├── about/
│ └── page.tsx
└── products/
└── page.tsx
```
یک Layout ساده می‌تواند به شکل زیر باشد:
```tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fa" dir="rtl">
<body>
<header>
Header
</header>
{children}
<footer>
Footer
</footer>
</body>
</html>
);
}
```
قسمت {children} محتوای صفحه‌ای است که کاربر در حال مشاهده آن است.
بنابراین اگر کاربر وارد /about شود، محتوای about/page.tsx در قسمت {children} قرار می‌گیرد.
## چرا Layout مفید است؟
مهم‌ترین مزیت Layout این است که از تکرار کد جلوگیری می‌کند.
بدون Layout ممکن است مجبور شویم در صفحات مختلف چنین ساختاری داشته باشیم:
```tsx
<Header />
<main>
...
</main>
<Footer />
```
اما با Layout فقط یک بار Header و Footer را تعریف می‌کنیم.
در نتیجه اگر بعداً بخواهیم Header را تغییر دهیم، لازم نیست چندین فایل را ویرایش کنیم.
## Layoutهای تو در تو
یکی از قابلیت‌های کاربردی Next.js این است که می‌توانیم برای بخش‌های مختلف سایت Layout جدا داشته باشیم.
مثلاً:
```text
app/
├── layout.tsx
├── page.tsx
├── dashboard/
│ ├── layout.tsx
│ ├── page.tsx
│ └── users/
│ └── page.tsx
└── products/
└── page.tsx
```
در این مثال، صفحات داخل dashboard می‌توانند علاوه بر Layout اصلی، Layout مخصوص داشبورد را نیز داشته باشند.
مثلاً Layout داشبورد می‌تواند Sidebar داشته باشد:
```text
Header
────────────────
Sidebar | Content
|
|
Footer
```
در حالی که صفحات عادی سایت نیازی به این Sidebar ندارند.
## Layout چه زمانی استفاده می‌شود؟
Layout برای بخش‌هایی مناسب است که بین چند صفحه مشترک هستند، مثل:
* Header
* Footer
* Sidebar
* Navigation
* ساختار کلی Dashboard
* بخش‌های مشترک صفحات
اما اگر یک بخش فقط در یک صفحه استفاده می‌شود، معمولاً نیازی نیست آن را داخل Layout قرار دهیم.
## Layout و جلوگیری از کدهای تکراری
فرض کنید یک فروشگاه اینترنتی داریم و ۲۰ صفحه مختلف دارد.
اگر Header و Footer را در هر صفحه بنویسیم، در صورت ایجاد یک تغییر کوچک باید چندین فایل را تغییر دهیم.
اما با Layout:
```text
Layout
├── Header
├── Page Content
└── Footer
```
ساختار مشترک فقط یک بار تعریف می‌شود و تمام صفحات می‌توانند از آن استفاده کنند.
این کار باعث می‌شود پروژه:
* مرتب‌تر باشد
* کد کمتری داشته باشد
* راحت‌تر تغییر کند
* نگهداری ساده‌تری داشته باشد
## جمع‌بندی
Layout یکی از قابلیت‌های کاربردی Next.js برای ساختاردهی بهتر پروژه است.
به زبان ساده، هر چیزی که قرار است بین چند صفحه مشترک باشد، می‌تواند گزینه مناسبی برای قرار گرفتن در Layout باشد.
با استفاده درست از Layout می‌توانیم از تکرار کد جلوگیری کنیم و ساختار پروژه را تمیزتر و قابل نگهداری‌تر نگه داریم.