I have been working on an app using Next JS and typescript. My goal is to fetch data from an api using getStaticProps, and then destructure the returned props. Unfortunately, I am facing some issues with de-structuring the props.
Below is my getStaticProps function.
export async function getStaticProps() {
const projects = await client.fetch(groq`
*[_type == "project"]{
name, url, description, image, tools[]->{name,image}
}`);
const tools = await client.fetch(groq`*[_type == "techtool"]{
name, featured, url, image
}`);
return {
props: {
projects,
tools,
},
};
}
I am trying to pass projects and tools to my page like this.
const Home: NextPage = ({projects, tools}) => {
console.log(props);
return (
<React.Fragment>
<Nav />
<Intro />
<Contact />
<Sidebar />
<Footer />
</React.Fragment>
);
};
export default Home;
However, when I attempt to do this, I encounter the following error.
"Property 'projects' does not exist on type '{ children?: ReactNode; }'."
"Property 'tools' does not exist on type '{ children?: ReactNode; }'."
Do I need to define an interface for the props? What could be causing this issue?
If I log props without de-structuring, it displays the expected arrays.
Thank you in advance for your help!