Next.js Discord

Discord Forum

Individual pages layout

Unanswered
Bachman's Warbler posted this in #help-forum
Open in Discord
Bachman's WarblerOP
I am trying to apply a layout to a specific page. I read that you can have a
app/foo/page.tsx
app/foo/layout.tsx

The layout inside the foo should replace the global layout. I also read it should be called template.tsx But I see both the layout or template and the global one. How am I suppose to apply a specific layout to a page or route in particular?

7 Replies

chisto
the layout inside won't replace global, they both apply, you have to use route groups to use different layouts
app
 --(group1)
    -- page.tsx
    -- layout.tsx
 --(group2)
    -- page.tsx
    -- layout.tsx
Bachman's WarblerOP
here is collapsed
isnt this what i have group?
chisto
nope, route groups are folders that don't appear in the url, they are used to organize routes and have different layouts, they have their names wrapped in parenthesis 
(folderName)

try this, and remove the root layout/template
app
 --(layout1)
    -- post/[slug]/page.tsx
    -- layout.tsx
 --(layout2)
    -- writer-studio/page.tsx
    -- layout.tsx

https://nextjs.org/docs/app/api-reference/file-conventions/route-groups
Bachman's WarblerOP
but wait a moment because i will require a different layout in just a few pages. With this model I have to copy paste the "main" layout in all routes?
so i have it like this now
chisto
(main)/layout will apply to (main)/page and (main)/[slug]/page and everything inside (main) folder
and template will apply to everything inside writer-studio folder
you don't have to copy paste the layout into all routes, that will duplicate it and show double "header and footer"