Next.js Discord

Discord Forum

custome layout

Answered
Pigeon tremex posted this in #help-forum
Open in Discord
Pigeon tremexOP
Hello Anyone, I need Help about custom layout in next 13.4
src
app
dashbord
page.js
layout.js
page.js
layout.js

when I make cutome layout for dashboard main layout also display how to solve it.
how to display custome layout only in dashboard dir
Answered by alfon
https://github.com/alfonsusac/nextjs-demos/tree/multiple-root-layout
https://nextjs-demos-git-multiple-root-layout-alfonsusac.vercel.app/
View full answer

52 Replies

Pigeon tremexOP
@joulev thank you, But i follow like this way but still display main layout file display dashboard page (main layout > dashboard layout> page layout ) display like this way. I cannot solve it
joulev
i dont understand your question
Pigeon tremexOP
my folder structure like this
alfon
you haven't use route groups...
Pigeon tremexOP
router groups.... means use bracket in dashboard eg. (dashboard)
alfon
yeep
(dahsboard)/layouts.tsx
(main)/layout.tsx
like that
Pigeon tremexOP
ok wait let see it. that image in before with out using bracket
when i use bracket in dashboard:
404
This page could not be found.
alfon
use (dashboard)/dashboard
since route group don't get displayed in the URL
Pigeon tremexOP
alfon
if your structure is like this
src
     app
          dashbord
                     page.js
                     layout.js
    page.js
    layout.js

and you want to have cutome layout for dashbaord main layout
src
  app
    (dashbord)
      dashbord
        page.js
        layout.js
      layout.js
    (landingpage)
      page.js
      layout.js
Pigeon tremexOP
@alfon still display main layout ( i think i have to re run dev )
alfon
what url did you access
Pigeon tremexOP
localhost:3000/dashboard
@Pigeon tremex localhost:3000/dashboard
alfon
you need to delete the layout.js in /app and move it to another root layout
Pigeon tremexOP
if we delete the home layout then, who to display it.
/(group)/page.tsx

has the same URL as

/page.tsx
if you put the root layout inside a group it won't affect the url
Pigeon tremexOP
if I run localhost:3000 then the main layout display ( if i delete it how to display on it )
alfon
what?
there will be 2 main layout display
since you put each at 2 route group
like this
/app/(landingpage)/page.js is accessed via localhost:3000/
Pigeon tremexOP
ok
-error
Module not found: can't resolve 'E:\library\src\app\layout.js'
alfon
what is your folder structure
Pigeon tremexOP
i have anydesk could you please 627 788 592
alfon
no sorry
Pigeon tremexOP
wait i send you image of folder structure
alfon
huh that's weird
it should work
maybe create an empty root layout
and move your <html> up to the /app folder
just the <html> tag though
Pigeon tremexOP
ok
its came blank page in localhost:3000
Pigeon tremexOP
could you please check it in own your system i am still waiting
Answer
Pigeon tremexOP
thank you
@alfon https://github.com/alfonsusac/nextjs-demos/tree/multiple-root-layout https://nextjs-demos-git-multiple-root-layout-alfonsusac.vercel.app/
Pigeon tremexOP
This working but when I use own code but not working what can I do for it.
Pigeon tremexOP
Hello @alfon, when I reinstall next js after that its working thank you for support,
But when I use different layout to different page, i.e. Dashboard, login, Homepage they have different layout
when I enter the dashboard then its full page reloding after that its also happen to Login layout.
If we use <Link href="/dashboard/payment"> payment </Link> in it to go to payment throug dasbboard section (payment and dashboard in same layout) this also relaoding page. But When i use in home layout page section same as in dashboard its work properly without loading page.

could you please help me.
https://github.com/Santosh-NPL/library
this is github link which i upload it, But I cannot solve the reloading problems in dashboard layout section.