layout.js در Next.js — ساختاردهی صفحات با انعطاف و هوشمندی

۱. تعریف layout در Next.js

فایل layout.js برای تعریف ساختار صفحات استفاده می‌شود. این فایل باید prop children را دریافت کند تا محتوای داخلی را نمایش دهد.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return <section>{children}</section>
}

۲. Root Layout — ساختار اصلی اپلیکیشن

فایل app/layout.tsx باید شامل تگ‌های html و body باشد و ساختار کلی اپلیکیشن را تعریف کند.

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

۳. دریافت پارامترهای داینامیک با props

layoutها می‌توانند prop params را دریافت کنند که شامل پارامترهای مسیر داینامیک است.

// app/dashboard/[team]/layout.tsx
export default async function Layout({ children, params }) {
  const { team } = await params
  return (
    <section>
      <h1>Welcome to {team}'s Dashboard</h1>
      {children}
    </section>
  )
}

۴. استفاده از LayoutProps برای تایپ بهتر

با استفاده از LayoutProps می‌توان تایپ دقیق‌تری برای props و slotها داشت.

export default function Layout(props: LayoutProps<'/dashboard'>) {
  return (
    <section>
      {props.children}
      {/* props.analytics if @analytics slot exists */}
    </section>
  )
}

۵. نکات مهم در عملکرد و کشینگ

Layoutها کش می‌شوند و در ناوبری مجدد رندر نمی‌شوند.
برای دسترسی به request، از cookies() یا headers() استفاده کنید.
برای دریافت query params، از useSearchParams() در کامپوننت کلاینتی استفاده کنید.
برای دریافت pathname، از usePathname() در کامپوننت کلاینتی استفاده کنید.

۶. نمایش محتوا بر اساس params

با استفاده از پارامترهای داینامیک می‌توان محتوا را شخصی‌سازی کرد.

// app/dashboard/layout.tsx
export default async function Layout({ children, params }) {
  const { team } = await params
  return (
    <section>
      <header><h1>Welcome to {team}'s Dashboard</h1></header>
      <main>{children}</main>
    </section>
  )
}

۷. استفاده از params در کامپوننت کلاینتی

در کامپوننت‌های کلاینتی، می‌توان از use() برای خواندن params استفاده کرد.

'use client'
import { use } from 'react'

export default function Page({ params }) {
  const { slug } = use(params)
}

جمع‌بندی

فایل layout.js در Next.js نقش کلیدی در ساختاردهی صفحات دارد. با استفاده از props مانند children و params، می‌توان صفحات پویا، قابل کش، و قابل شخصی‌سازی ساخت. ادغام با کامپوننت‌های کلاینتی نیز امکان دریافت اطلاعات به‌روز را فراهم می‌کند.