Revision history [back]

There are different ways you can pass props to the Layout component in NextJs:

1. Using the props object: You can pass props to the Layout component directly through the props object located in the pages that are using the Layout component.

function HomePage(props) {
  return (
    <Layout pageTitle={props.pageTitle}>
      <h1>Welcome to Next.js!</h1>
    </Layout>
  );
}

1. Using the getInitialProps() method: You can use the getInitialProps() method to fetch data and pass the data as props to the Layout component.

HomePage.getInitialProps = async function() {
  const data = await getData();
  return {
    pageTitle: data.pageTitle
  };
};

function HomePage(props) {
  return (
    <Layout pageTitle={props.pageTitle}>
      <h1>Welcome to Next.js!</h1>
    </Layout>
  );
}

1. Using the children property: If you are passing components as children to the Layout component, you can pass props to those children components and access them through the children property.

function HomePage(props) {
  return (
    <Layout>
      <h1>{props.pageTitle}</h1>
      <Paragraph color="blue">This is a paragraph.</Paragraph>
    </Layout>
  );
}