next.jslayout

Next js 14 multiple page layout problems

I get some troubles when I try to add another page for example admin page I get the same layout from the previous homepage layout so anyone know this please tell me how can I fix this one

I tried to use different layout for different page that's not working

Solution

  • Check out nextjs official documentation of the layout and template. Each page route has layout.tsx and page.tsx.

    A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

    You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.

    // app/dashboard/layout.tsx
export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}