Passing Data Between Layouts and Pages in Next.js

A Next.js layout has no channel for sending data down to the page it wraps, beyond rendering that page as its children. A page has no channel for sending data up to its layout either. Each one gets its own props from Next.js and fetches its own data.

This surprises developers coming from a component tree where a parent can pass any prop it wants to a child. A layout's only real prop is children, so a common data-sharing plan, like reading a value in the page and expecting the layout above it to see that value, does not work.

What each side actually receives

Both a layout and the page it wraps receive params independently when the route includes a dynamic segment, and both must await it before reading a value.

App.tsx

// app/dashboard/[team]/layout.tsx
export default async function TeamLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ team: string }>;
}) {
  const { team } = await params;
  return <div data-team={team}>{children}</div>;
}

The page at the same route receives the identical team value through its own params, without the layout passing anything. Next.js resolves the URL once and hands the matching value to every file in that segment.

Only a page receives searchParams. A layout does not rerender when the query string changes, so Next.js never gives it a query string value at all. If shared UI in a layout needs to react to one, that piece has to move into a client component that reads the current URL with a client-side hook instead.

Sharing one data fetch between a layout and a page

When a layout and a page both need the same data, such as the current user, call the same function in both places instead of trying to send it from one to the other.

App.tsx

// lib/user.ts
import { cache } from "react";
 
export const getUser = cache(async (id: string) => {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
});

Wrapping the function in cache means that if the layout and the page both call it with the same user ID during the same request, only one network call happens. Plain fetch calls are deduped automatically by Next.js even without cache, but cache extends that same deduping to a database client or any other async function.

What does not exist

There is no context provider that Next.js wires up between a layout and a page for you, and there is no official API for a page to update the layout that wraps it. The only documented ways to keep a layout and a page in sync are reading the same URL data independently on both sides, sharing a cache-wrapped data function, or moving state into a client component that both can import.

For the full picture of what a layout can render and where it sits in the folder structure, see Layouts in Next.js: Root Layouts and Nested Layouts Explained. To read params and the query string in more depth, see Next.js params vs searchParams: How to Read URL Parameters.