layout and components in next js multi-zone app dir
Unanswered
Ojos Azules posted this in #help-forum
Ojos AzulesOP
How can I leverage the layout.js feature of the Next.js App Router in a multi-zone setup to avoid redundant header rendering and API calls? Specifically, if I have a shared header component that should be consistent across all pages in both the host application and remote applications (treated as "pages" by Next.js), how can I ensure it's loaded only once from the root layout, preventing unnecessary re-renders and API calls when navigating between host and remote zones? Do I need to import the header component separately within each remote application, and if so, how do I avoid the performance implications of that?
3 Replies
Savannah
I'm new to NextJS and I'm building a POC using multi-zones. What's the proper folder structure when creating shared components like "header", "footer", "navigation", etc. that will be used by different zones?
Don’t worry about re-renders happening in your layout.tsx files, these files are server components by default and state is preserved during navigations.
They will only be mounted once no matter how many times you navigate between the pages rendering inside of them
They will only be mounted once no matter how many times you navigate between the pages rendering inside of them
@Savannah I'm new to NextJS and I'm building a POC using multi-zones. What's the proper folder structure when creating shared components like "header", "footer", "navigation", etc. that will be used by different zones?
If they’re meant to be shared across all navigations then you should put them in your layout.
About the folder structure it doesn’t really matter to Next.js, as long as you respect the reserved file names. I like to make a _components folder close to where my layout is, and put the components there if they’re client components.
For server components I just put them below the Layout component inside layout.tsx, if they’re only meant to be used within that specific Layout
About the folder structure it doesn’t really matter to Next.js, as long as you respect the reserved file names. I like to make a _components folder close to where my layout is, and put the components there if they’re client components.
For server components I just put them below the Layout component inside layout.tsx, if they’re only meant to be used within that specific Layout