Next.js with Typescript - how to access app.js props and staticProps in functional component

Question

I want to know if it's possible for me to access props passed down from app.js to all Component Page using typescript and functional components. Take a look at app.js and index.ts

app.js:

function MyApp({ Component, pageProps, router }) {

 const [message, setMessage] = useState(false)
 return (
   <Component setMessage={setMessage} key={router.route} {...pageProps} />
 )
}
export default MyApp

Index.ts:

function Home({products}): InferGetStaticPropsType<typeof getStaticProps>) {

 return (
   <div>Home</div>
 )
}

export function getStaticProps(){
   const products = []
}

I would like to be able to access the setMessage function AND the products from getStaticProps in the index.ts page. I might be doing things the wrong way, thank you for your advice.

Answer 1

It is possible, just like with regular components. Pass your props along with pageProps , like you already do with your setMessage . Here is example . I didn't followed your code precisely, but idea is the same.