routing in nextjs

سلام

برای این مورد یکی از روش ها استفاده کردن از کامپوننت App

به عنوان نمونه میشه فایل app.jsـ  به این صورت کد رو اضافه کرد

// Layout component
const Layout = ({ children }) => (
 <div className="layout">
 	<Header />
 	{children}
 </div>
 )



// _app.js
export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

برای اینکه بخوایم layout های متفاوت داشته باشیم با توجه به شرایط میشه استراتژی های متفاوتی داشت!

مثلا میتونی بر اساس route بیایم به صورت conditional چک بکنیم که داخل چه صفحه ای هستیم و متناسب با صفحه بیام و layout مناسب رو قرار بدیم. این روش خوبی که داره کل کد در یک محل قرار میگیره ولی خوب یکمی هم اگر پروژه بزرگ بشه کار سخت میشه!

یک روش دیگه هم این که داخل هر page مشخص بکنیم که از چه layout باید استفاده بکن! که این مورد هم پیاده سازی های متفاوتی میتونه داشته باشه که یک نمونه پیاده سازی رو در این لینک میتونی ببینی. چک بکن اگر باهاش مشکل داشتی بگو تا بیشتر در موردش توضیح بدم! البته این مورد روش های دیگه هم میشه پیاده سازی کرد و این تنها روش نیست

روش های دیگه میشه با توجه به شرایط استفاده کرد