Next.js 在 getServerSideProps 方法中访问 Page props

Question

I'm passing some properties to the on the _app page.

<PageWrapper>
  <Component someProps={someProps} />
  <GlobalCSS />
 </PageWrapper>

Is it possible to access these props in the getServerSideProps method on each Page?

export const getServerSideProps: GetServerSideProps = async context => {
  const data = await fetchData(someProps); // ??
  
  return { props: { data } };
};

Answer 1

Lets say you have a page demo with

// ...
export const getServerSideProps = async () => {
  const demo = await fetch('/api/demo');

  return {
    props: {
      demo,
    }
  };
};

and somewhere in your other child component you can access it

export const MyComponent = () => {
  const { components } = useRouter();

  console.log(components['demo'].props.pageProps);
};

Attention! This is undocumented and hacky way.

Answer 2

You can check this Next JS document fetching data and use. I hope so this is usefull for you !