با استفاده از طرح‌بندی‌های سفارشی در Next.js از تکرار کد خودداری کنید.
Next.js یک چارچوب قدرتمند برای ساخت برنامه های React با کارایی بالا است. یکی از ویژگی های آن امکان ایجاد طرح بندی های سفارشی برای صفحات شما است که به شما امکان می دهد یک طراحی ثابت ایجاد کنید که نگهداری و به روز رسانی در سراسر برنامه شما آسان باشد.
ایجاد یک کامپوننت Layout سفارشی در Next.JS
در پوشه ای به نام کامپوننت ها در پروژه Next.js خود، Layout.jsx را ایجاد کنید و کد زیر را برای ایجاد مؤلفه layout اضافه کنید.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
این کامپوننت مولفه های Header و Footer را وارد می کند و کودکان را به عنوان props می پذیرد. بچه ها را بین اجزای Header و Footer رندر می کند. وقتی صفحه ای را با این Layout می بندید، سربرگ و پاورقی در بالا و پایین نمایش داده می شود.
با استفاده از مولفه Layout
برای استفاده از کامپوننت layout، آن را در کامپوننت صفحه وارد کرده و مطابق شکل زیر از آن استفاده کنید.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
طرح بندی را در این صفحه اعمال می کند. می‌توانید این فرآیند را برای تمام صفحاتی که می‌خواهید طرح‌بندی را اعمال کنید، تکرار کنید.
برای استفاده همزمان از طرح‌بندی در تمام صفحات برنامه‌ها، مؤلفه طرح‌بندی را در فایل /page/_app.js وارد کرده و به صورت زیر از آن استفاده کنید.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
نمونه هایی که تاکنون نشان داده شده اند از پوشه های Next.js 12 pages استفاده می کنند. در Next.js 13، طرح‌بندی را در پوشه برنامه ایجاد می‌کنید (در حال نوشتن، در بتا است).
ایجاد یک طرح بندی سفارشی در پوشه برنامه
پوشه برنامه در Next.js 13 از شما می خواهد که یک طرح بندی ریشه در پایه آن ایجاد کنید. این طرحی است که Next.js در تمام صفحات برنامه شما اعمال می کند.
برای نشان دادن، یک فایل با نام layout.jsx ایجاد کنید و کد زیر را اضافه کنید.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
مؤلفه layout root کودکان را می پذیرد و رندر می کند. در زیر برخی از مواردی که باید در مورد چیدمان ریشه بدانید آورده شده است:
- باید آن را در پوشه برنامه قرار دهید.
- جایگزین _app.js و _document.js در پوشه page Next.js 12 می شود.
- شما باید به صراحت تگ HTML و بدنه را وارد کنید.
- به طور پیش فرض یک جزء سرور است.
همانطور که گفته شد، طرح ریشه برای همه صفحات اعمال می شود، بنابراین چگونه می توانید طرح بندی های سفارشی را برای بخش های مختلف مسیر ایجاد کنید؟
در پوشه برنامه خود، می توانید با ایجاد پوشه برای هر بخش مسیر، یک مسیر تعریف کنید. به عنوان مثال، ایجاد یک پوشه به نام articles maps به مسیر URL app/articles. برای افزودن بخش‌های مسیر بیشتر، یک زیرپوشه در پوشه مسیر اصلی ایجاد کنید. به عنوان مثال، افزودن پوشه ای به نام trending در داخل نقشه های پوشه مقالات به مسیر URL app/articles/trending.
هنگامی که یک مؤلفه layout.jsx را به پوشه مسیر اضافه می‌کنید، برای تمام صفحات آن بخش مسیر و زیرپوشه‌های آن اعمال می‌شود. به عنوان مثال، افزودن یک مؤلفه طرح‌بندی به پوشه مقالات برای همه صفحات در مسیر مقالات، از جمله صفحات زیرپوشه پرطرفدار اعمال می‌شود. اگر یک جزء طرح‌بندی را نیز در پوشه ترند اضافه کنید، طرح‌بندی در پوشه مقالات درون آن قرار می‌گیرد.
مزایای استفاده از Layouts
Next.js شما را قادر می‌سازد تا اجزای طرح‌بندی را ایجاد کنید که می‌توانید در صفحات مختلف مجدداً از آنها استفاده کنید. این به شما این امکان را می دهد که بدون تکرار کد در چندین صفحه، ظاهری ثابت در سراسر وب سایت خود داشته باشید. علاوه بر این، طرح‌بندی‌ها به شما کمک می‌کنند تغییرات را سریع اعمال کنید، زیرا نیازی به ایجاد تغییرات در هر صفحه ندارید.