Next.js Discord

Discord Forum

layout.tsx does not re-render automatically

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
I have the frame of my page in layout.tsx for a route,
and then have a part where the children elements are passed in

however when I change anything in the layout it requires me to do a full restart for the change to take affect.
Answered by Luis
If you want a “layout” that re-renders when state changes then use template.tsx, it’s effectively a layout.tsx with a key prop
View full answer

14 Replies

That’s the default behavior for a layout.tsx, it’s not designed for re-rendering
If you want a “layout” that re-renders when state changes then use template.tsx, it’s effectively a layout.tsx with a key prop
Answer
Asian black bearOP
good to know, i wasnt aware of template.tsx before so thank you
i guess this answers my other question of how I would use a layout for multiple routes
Use layout.tsx for static shells that will share across all routes under it, such as basic navigation, a layout (as for distribution of your page)
@Luis Use layout.tsx for static shells that will share across all routes under it, such as basic navigation, a layout (as for distribution of your page)
Asian black bearOP
okay what if i want index to be its own landing page that does not follow a layout and then have another layout for all other routes, what would be the best way to go about that
you can do that by grouping all ther pages in (whatever) folder, name it with "()" so that level of nesting is avoided b the routing system and you ca put a "layout.tsx" file that will wrap only the routes that are inside that (whatever) folder
You always need a layout.tsx tho, even for the index page, you can just make that index layout only render children so it can wrap your index page.tsx
Asian black bearOP
okay, and if I have a template.tsx I wouldnt need a layout right ?
@Asian black bear okay, and if I have a template.tsx I wouldnt need a layout right ?
No you don’t need it, but you can have both in case you want
Layout wraps Template
And Template wraps Page
<Layout>
<Template>
<Page/>
</Template>
</Layout>