NextJS persistent nested layout for tabs

Question

I am trying to implement a persistent layout for a profile page. What I have currently is a persistent layout for the header and the rest of the content, which was no issue to implement. But with the profile view I am having some issues.

Layout components:

The difference is that I would like to load the orange content (persistent profile page elements) once, only the tabs (yellow) should be loaded dynamically.

In other words, header has to be always persistent, but the orange elements have to be persistent between profile pages (/profile/index, /profile/content, /profile/about-me, ...). Obviously there are other pages, besides /profile/*, which only consists of header and the rest of the page's contents.

Website structure:

• Homepage (/)
• Store page (/store)
• Login page (/login)
• Profile page (/profile/[ID], default subpage being index)
• • Index (/profile/[ID]/index)
• • Content (/profile/[ID]/content)
• • About me (/profile/[ID]/about-me)

I have tried doing this with wrapper layout, but the issue is that I have to obtain data for the profile page from else where. I also need this data to be sync and NOT loaded client-side.

Answer 1

Let's say you have Layout.tsx as your main layout with your persistent header inside it.

Now you need to create a ProfileLayout.tsx component containing your persistent User profile info and persistent sidebar(for the matter any component you want to be persistent throughout the Profile pages) which will be wrapped by the Layout component like this:

//ProfileLayout.tsx

const ProfileLayout: FC = ({ children }) => {
  return (
    <Layout>
        .
        .
        // Persistent profile info
        .
        .
    </Layout>
  )
}

export default ProfileLayout

Now you just need to use this ProfileLayout as the layout of each of your Profile page like this:

// content.tsx
  
const Content = () => {
  return 'Content'
}

Content.Layout = ProfileLayout

export default Content