Мундариҷа дар макети сайт дар NextJS

Макети асосии сайтро дида мебароем, ки мо дар дарси гузашта оғоз кардем:

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

Чунон ки шумо мебинед, макети сайт як компонент бо функсия мебошад. Дар ин ҳол ба параметри функсия як объект дода мешавад, ки аз он мо калиди children ба тағирёбандаи мувофиқ мегирем. Дар ин тағирёбанда муҳтавои файли page.jsx нигоҳ дошта мешавад, ки ба URL-и дархосткардашуда мувофиқат мекунад.

Яъне дар файли layout.jsx мо макети сайтро нигоҳ медорем, ва бо ёрии тағирёбандаи children мо ҷойгоҳеро дар макети сайт ишора мекунем, ки ба он бояд мундариҷаи саҳифа дохил карда шавад.

Барои мисол биёед мундариҷаи саҳифаро дар як теги ҳархе ҷобаҷо кунем:

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