如何将 Next.js 13 中的 page.js 的道具传递给 layout.js？

Question

I want to pass props to layout.js of Next.js 13. Here's what it'd look like:

// layout.js
export default Layout({children}) {
  return (
    <>
      {/* I want to render different `text` depending on the page.js I'm rendering */}
      <h1>{text}</h1>
      {children}
    </>
  );
}

Unfortunately, I end up doing this:

// CustomLayout.js
export default Layout({children, text}) {
  return (
    <>
      {/* I want to have different `text` depending on the Page.js I'm rendering */}
      <h1>{text}</h1>
      {children}
    </>
  );
}

My question is, is it possible to pass props to layouts in Next.js 13? Is there a better approach?

// In every page.js
import Layout from "somewhere/CustomLayout";

export default Page() {
  return (
    <Layout text="My text">
    {/* My Page Content */}
    </Layout>
  );
}

Answer 1

You shouldn't be trying to pass custom props to Layout , as this component is created by you, but Next.js itself would call it, by giving it two props :

children (required)

Layout components should accept and use a children prop. During rendering, children will be populated with the route segments the layout is wrapping. These will primarily be the component of a child Layout (if it exists) or Page, but could also be other special files like Loading or Error when applicable.

params (optional)

The dynamic route parameters object from the root segment down to that layout.

Wanting to pass custom props to it, I think, is because you wanna use it in different places, but the whole idea is to have one Layout by route segment. And subroutes inherit the layout of outer ones. For example, layout.js inside app/blog gets wrapped by layout.js inside app/ .

Having Layout called inside page.js as you did, is like having any wrapper, but not a Layout as designed by Next.js with its specific abilities:

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

import Layout from "somewhere/CustomLayout";

export default Page() {
  return (
    // ⚠️ this would behave like a normal wrapper, but not as a Layout as Next.js defines it
    <Layout text="My text"> 
    {/* My Page Content */}
    </Layout>
  );
}

Answer 2

No, you shouldn't pass in additional props to a layout.js file in nextjs 13 appdir.

As @yousoumar pointed out, you shouldn't be calling Layout yourself. It sits at the root (at least for all the components under it), so should be treated as such.

Your approach of creating a custom layout that passes text as a prop is a reasonable approach.