app router next js avoid the default layout and use our own page layout?

Question

I used a default layout in layout.jsx and as props, I passed all my other pages as children, in page router, we could config router path to define which layout should be used but in this new system, I don't know how to code it.

import "./globals.css"
import Header from "./components/Header"
import { Inter, Poppins } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

const poppins = Poppins({
    weight: ["400", "700"],
    subsets: ["latin"],
})
export const metadata = {
    title: "Weather app",
    description: "Author Sayeed Mahdi Mousavi",
    keywords: "weather, teather",
}

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={poppins.className}>
                <Header />
                {children}
            </body>
        </html>
    )
}

also, I have another layout for my weather app layout. the below layout is in my weather app folder with the name of the layout.jsx.

import LayoutTailwind from "../components/LayoutTailwind"

const Layout = ({ children }) => {
    return (
        <>
            <LayoutTailwind />
            {children}
        </>
    )
}

export default Layout

score 1 · Answer 1 · answered May 28 '23 at 11:58

What I understood from your question is that you need different Layouts for different pages in your app. Is that correct? To do so what you can do is remove your app.js Layout file and just add layout.jsx in all your other route folders. Carefully read this doc link for further clarification: https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts

Thank you! Hope I was able to help.

score 0 · Answer 2 · answered Jun 01 '23 at 12:23

as I found the solution was that, we can make a layout for different pages then for each we add our design and content.

export default function Categories() {

  return (
    <>
      <Sidebar />

      <div className="lg:pl-72">
        <Header />

        <main className="py-10">
          <div className="px-4 sm:px-6 lg:px-8">
            <div className="px-4 sm:px-6 lg:px-8">
              <CategoryForm />
              <CategoryTable />
            </div>
          </div>
        </main>
      </div>
    </>
  )
}

and this page

import Header from "@/components/Header"
import Sidebar from "@/components/Sidebar"

export default function Home() {
  return (
    <>
      <Sidebar />

      <div className="lg:pl-72">
        <Header />

        <main className="py-10">
          <div className="px-4 sm:px-6 lg:px-8">
            <p>Your content goes here</p>
          </div>
        </main>
      </div>
    </>
  )
}

No, we can have our layout on different pages.

app router next js avoid the default layout and use our own page layout?

2 Answers2