Layout management - T3 Stack - Next.js v13
Im struggling with layout usage. Can't fugure out how to implement it well using the create T3 app starting point. Basically im creating a admin section that will have lets say 4 sub sections ( ...url.../admin/user, .../settings, .../dashboard, etc) and the subsections will be in the content of an admin layout that should persist states like active section but I couldn't find a workaround for this. On React.js i used to use react router dom and just setting the Outlet as children of the layout and thats all.
As i read in next js docs, v13 beta has a better management on layouts but idk how to migrate from the t3 stack template to that struture to get what im looking for. Has anyone faced the same difficulty ?
13 Replies
not sure, have you known the
getLayout
function?I saw this approach but I dont understand completly how this fits with the folder routing.
For example: I have this foldering
src/pages/admin -- this folder will have all the admin sections I guess like "settings.tsx" so when accesing to "url.com/admin/settings will show that component and if I set the layout there when moving to other section like "url.com/admin/table" wil render the other component and layout again without persistance aka rerendering layout, isn't it ?
Updating this issue:
I implemented the
getLayout
approach and it worked well. Layout doesn't re-render and working great. A bit unconfortable to set manually the layout for all leafs on the directory files but not a big deal. Idk if it will be easy to migrate to further versions with new layout management.@Benja can you share how to you implemented that?
please
Sure!! I will share you my files so adapt them to your structure and usage
1 - Config your _app to use the component layout
2 - Create your layout! In my case I created the folder layouts at
src/layouts
with a custom layout, but here I give you a basic one so you can try it out
3 - Use it on your dynamic routes! Well here I made the folder src/pages/admin/[id]
so I can use dynamic ids of business on the admin section line http://myurl.com/admin/123456/dashboard or /table or /users. So for this I created in the folder src/pages/admin/[id]
every section file like dashboard.tsx, table.tsx, users.tsx so it gets on the routing
4 - Section config for layout usage!! This is the important part and what I said it was a bit unconfortable: setting the layout on every section manually. Here is one of the sections with the layout setting:
5 - And thats all !! Maybe if you are doing similar to my project you would like to set a default route to urls like http://myurl.com/admin/123456 because if this folder ( src/pages/admin/[id]
) doesn't have an index.tsx file it will not respond as you would expect. So I made a config at next.config.mjs
to get the flow i wanted like setting the /dashboard section as default when accessing http://myurl.com/admin/[id] directly, here is my approach:
Hope this guide helps you !!Thanks you!!!!!
Bro what's ur github? I'll give you a star!
where does the getLayout pattern come from?
@Benja
Sure man! https://github.com/BenjaOliva
GitHub
BenjaOliva - Overview
Developer at GlobalThink Technology. BenjaOliva has 15 repositories available. Follow their code on GitHub.
Well is not like a pattern itself. Functions are like object variables and you are setting the layout at Component.getLayout and as you are setting this layouts on you components, they are rendering at _app flow to get layout and set it's corresponding children. I guess that's you are asking for
For anyone who wants to get the layout working with types, I've cobbled together the following through Benja's superb advice above, Nextjs's docs and some other searches. I'm fairly new to TS, take this with a grain of salt but it appears to be working.
Using the pages router, in _app.tsx, I have the following:
In my Layout component, I have:
Finally, in index.tsx, I have (which I reckon needs to be replicated for each page that's going to use the layout).
Thats great @FilipN !! I will try it out for sure, thanks for your advice
I don't understand, you want to have multiple Root layouts?
So the layout from /user and /admin will be different?
Why not use Route groups
https://nextjs.org/docs/app/building-your-application/routing/route-groups
beacuse that comes with the app foldering and on t3 stack version we used it's whitout it. So you can't set a layout.js file for this foldering structure. Thast one of the advantages of using the new Next.js version
They explain exactly what we are doing right here:
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
Routing: Pages and Layouts
Create your first page and shared layout with the Pages Router.