How to pass data from layout to page

[maxvoronov]

Summary

Hi there! There is a section User Profile where I get username from URL. Then in layout I make a request to API passing this username and receive UserID + extra user info. I render profile header in layout using user info. But I also need to pass UserID to the page for other API requests.

• Must be done on server-side, cannot use client-side methods like context or cookies
• Passing extra props to {children} using React.cloneElement doesn't work
• Extra API call to fetch user information by username looks overcomplicated. Besides, using axios instead of fetch there are difficulties with caching requests (I haven't figured out how to do it correctly only on the server side).

Thanks in advance.

Additional information

Libs:
  next: 14.0.3
  react: 18.2.0
  typescript: 5.2.2
  axios: 1.6.2

Example

No response

[tomassabol]

I tried solving this using React cache, but I'm not sure if this is the correct approach.

[rafaelsg-01]

I know this post is old, but I spent a LOT of time figuring this out, so I’d like to share it for anyone who still needs a solution.

My goal was simple: I have a Layout Server that is the parent of a Page Client, and I wanted the Layout Server to fetch data and pass it to the Page Client (preferably using useState). This is the solution I came up with:

Summary:

• Inside the Layout Server, I fetch the data.
• I pass this data to a Component Client via props.
• I wrap the Layout Server’s children inside this Component Client.
• This way, I can use Context to share the data with the Page Client.

Structure:

src/  
└── app/  
    └── admin/  
        └── [idUser]/  
            ├── layout.tsx  
            ├── shareDataAdminLayout.tsx  
            ├── page1/  
            │   └── page.tsx  
            ├── path/  
            │   └── page2/  
            │       └── page.tsx  

Layout (Server):

// src/app/admin/[idUser]/layout.tsx

// 'use server'
export const runtime = 'edge'

import { ComponentClient_shareDataAdminLayout } from "./shareAdminLayout"

export default async function LayoutServer_pathAdmin({ children, params }: { children: React.ReactNode, params: {idUser: string}}) {

    const fetchData = await fetch(`https://api.mydomain.com/get/data/admin/${params.idUser}`)
    const contentJson = await fetchData.json() as { name: string, color: string }

    return (
        <ComponentClient_shareDataAdminLayout data={{content: contentJson}}>
            { children }
        </ComponentClient_shareDataAdminLayout>
    )
}

Context and Component (Client):

// src/app/admin/[idUser]/shareDataAdminLayout.tsx

'use client'

import { createContext, useState } from "react"

export const Context_shareDataAdminLayout = createContext<{
    Content_name: string; Set_name: React.Dispatch<React.SetStateAction<string>>;
    Content_color: string; Set_color: React.Dispatch<React.SetStateAction<string>>;
}>({} as any)

export function ComponentClient_shareDataAdminLayout( { children, data: { content } }: { children: React.ReactNode, data: {  content: { name: string, color: string } } }) {
    const [ Content_name, Set_name ] = useState<string>(content.name)
    const [ Content_color, Set_color ] = useState<string>(content.color)

    const shareDataUseState = {
        Content_name, Set_name,
        Content_color, Set_color
    }

    return (
        <Context_shareDataAdminLayout.Provider value={{...shareDataUseState}}>
            { children }
        </Context_shareDataAdminLayout.Provider>
    )
}

Page 1 (Client):

// src/app/admin/[idUser]/page1/page.tsx

'use client'

import { useContext } from "react"
import { Context_shareDataAdminLayout } from "@/app/admin/[idUser]/shareAdminLayout"

export default function PageClient_1({ params}: { params: { idUser: string } }) {
    const { 
        Content_name, Set_name,
        Content_color, Set_color
    } = useContext(Context_shareDataAdminLayout)

    async function changeName() {
        await fetch(`https://api.mydomain.com/put/data/admin/${params.idUser}`, {
            method: 'PUT',
            body: JSON.stringify({ name: 'Name Changed' })
        })

        Set_name('Name Changed')
    }

    return (
        <main>
            <h1>Page Client 1</h1>
            <button onClick={changeName}>Change name</button>
            <p>Name: { Content_name }</p>
            <p>Color: { Content_color }</p>
        </main>
    )
}

Page 2 (Client):

// src/app/admin/[idUser]/path/page2/page.tsx

'use client'

import { useContext } from "react"
import { Context_shareDataAdminLayout } from "@/app/admin/[idUser]/shareAdminLayout"

export default function PageClient_2({ params}: { params: { idUser: string } }) {
    const { 
        Content_name, Set_name,
        Content_color, Set_color
    } = useContext(Context_shareDataAdminLayout)

    async function changeColor() {
        await fetch(`https://api.mydomain.com/put/data/admin/${params.idUser}`, {
            method: 'PUT',
            body: JSON.stringify({ color: 'Color Changed' })
        })
 
        Set_color('Color Changed')
    }

    return (
        <main>
            <h1>Page Client 1</h1>
            <p>Name: { Content_name }</p>
            <p>Color: { Content_color }</p>
        </main>
    )
}

That’s it! I’m using @cloudflare/next-on-pages from Cloudflare Pages, and it’s working great — the page loads with the data already available for the user.

Personally, I use JWT in cookies instead of params. Here’s a version using them:

// src/app/admin/[idUser]/layout.tsx

// 'use server'
export const runtime = 'edge'

import { ComponentClient_shareDataAdminLayout } from "./shareAdminLayout"
import { cookies } from 'next/headers'

export default async function LayoutServer_pathAdmin({ children }: { children: React.ReactNode }) {
    const serverCookies = cookies()
    const jwtAdmin = serverCookies.get('jwt_admin')?.value

    const fetchData = await fetch(`https://api.mydomain.com/get/data/admin`, {
        headers: {'Cookies': `jwt_admin=${jwtAdmin}`}
    })

    const contentJson = await fetchData.json() as { name: string, color: string }

    return (
        <>
            <ComponentClient_shareDataAdminLayout data={{content: contentJson}}>
                { children }
            </ComponentClient_shareDataAdminLayout>
        </>
    )
}

Hope this helps someone!

[SpoofSociety]

I also used the context method after initially trying the headers method without success. Here's an example:

📝 Project Structure:
📁 app/
├── 📄 UseLayoutData → Context
├── 📄 layout.js → (Server) Defines and provides the context
├── 📄 page.js → (Server) Displays the client component
└── 📄 ChildComponent.js → (Client) Uses the context data

1/We create a React context to share data.

📄 UseLayoutData.js

"use client"; // Required for React hooks

import { createContext, useContext } from "react";

// Create the context
const LayoutDataContext = createContext(null);

// Provider to wrap children with the data
export function LayoutDataProvider({ children, value }) {
  return (
    <LayoutDataContext.Provider value={value}>
      {children}
    </LayoutDataContext.Provider>
  );
}

// Hook to use the context
export function useLayoutData() {
const context = useContext(LayoutDataContext);
if(!context) throw new Error("Use layout data is outside context")
  return context
}

2/ Store Data in layout.js (Server)
Here, we fetch data and pass it to the LayoutDataProvider.

📄 layout.js

import { LayoutDataProvider } from "./UseLayoutData";

async function fetchLayoutData() {
  // Simulates an API returning global data
  return { siteName: "My Super Site", theme: "dark" };
}

export default async function Layout({ children }) {
  const layoutData = await fetchLayoutData();

  return (
    <>
        {/* Provide data to the application */}
        <LayoutDataProvider value={layoutData}>
          {children}
        </LayoutDataProvider>
    </>
  );
}

3/Create a Client Component that Uses the Context
This component fetches data from layout.js using the context.

📄 ChildComponent.js

"use client"; // Required because we use React hooks

import { useLayoutData } from "./UseLayoutData";

export default function ChildComponent() {
  const layoutData = useLayoutData();

  return (
    <div>
      <h2>Client Component</h2>
      {layoutData ? (
        <p>Current theme: {layoutData.theme}</p>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

4/ Display the Component in page.js
Since page.js is a server component, it cannot directly use the context.
Therefore, we display it inside a client component (ChildComponent.js).

📄 page.js

import ChildComponent from "./ChildComponent";

export default function Page() {
  return (
    <div>
      <h1>Main Page</h1>
      <ChildComponent />
    </div>
  );
}

I used this hybrid client/server technique, which works in my project. I hope good luck to everyone!

[creativebull]

Is there a way to keep the server component for the page?