Revision history [back]

In Next.js, you can pass variables from a Layout component to its child components using props.

1. Define the variable in the Layout component.

const myVariable = "Hello world!";

1. Pass the variable as a prop to the child component.

<ChildComponent myProp={myVariable} />

1. Access the prop in the child component.

function ChildComponent({ myProp }) {
  return <p>{myProp}</p>
}

Now, when the ChildComponent is rendered, it will receive the value of myVariable as a prop and display it in the paragraph element.