Next.js Discord

Discord Forum

Layout in pages router

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
My problem is I need a layout for the admin directory but still be able to change the URL, I mean I can conditionally render stuff but that will not be tied to an URL, I need to display the component related to the URL. I tried the "per-page" layout but it's confusing and very ugly, I could make it work but I noticed it's just a per page thing and I need a nested layout.

I know the app router solves this but I don't wanna upgrade yet, busy with too much study and I need to apply my knowledge.

Any clue??

Thanks!

24 Replies

Ray
just create a layout component and check auth before the return
@Ray just create a layout component and check auth before the return
Asiatic LionOP
you mean add it manually to all components?
Ray
for example, create a AdminLayout component, then wrap every page inside the admin folder
// pages/admin/HR.tsx

export default function HRPage() {
  return (
    <AdminLayout>
      ...hr page
    </AdminLayout>
  )
}
Asiatic LionOP
i forgot to mention i have a globallayout, so this would be a nested layout. And yeah that's what I thought, just wrap every component but it's kinda ugly :/
Ray
export default function AdminLayout({children}) {
  const user = useAuth()
  if (!user) return null // or something else

  return children
}
Asiatic LionOP
i could also just check if the route has "admin" and just modify the global layout so i have this extra nav
Ray
otherwise use app router
Asiatic LionOP
yeah lul
thanks Ray for the help!
Ray
np
Asiatic LionOP
is it too difficult to upgrade?
Ray
well depend on how your current page render lol
not difficult but might took awhile to rewrite
Asiatic LionOP
I must say i have more backend work than front work, i could upgrade
i see
Ray
it shouldn't be long if the state managament isn't complex
Asiatic LionOP
I redid the business schemas so i'll have to modifiy the redux stuff anyways
thanks Ray!
Asiatic LionOP
the pages router is UGLY you can't code a site with this without having bad DX, it doesn't even have relative urls?
Ray
what do you mean?
Asiatic LionOP
"" or "/" does the same
if i put "admin/organization", and press it twice it just adds the same url again lol
Ray
you mean <Link href="admin/organiztion" /> and if you press twice the url will become admin/organization/admin/organization?