۱. تعریف 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، می‌توان صفحات پویا، قابل کش، و قابل شخصی‌سازی ساخت. ادغام با کامپوننت‌های کلاینتی نیز امکان دریافت اطلاعات به‌روز را فراهم می‌کند.