سلام

برای این مورد یکی از روش‌ها استفاده کردن از کامپوننت 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 باید استفاده بکن! که این مورد هم پیاده سازی‌های متفاوتی میتونه داشته باشه که یک نمونه پیاده سازی رو در این لینک میتونی ببینی. چک بکن اگر باهاش مشکل داشتی بگو تا بیشتر در موردش توضیح بدم! البته این مورد روش‌های دیگه هم میشه پیاده سازی کرد و این تنها روش نیست

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