I am building an app with Next JS and typescript. I am trying to call data from an api with getStaticProps, and then de-structure the returned props. For some reason, I can't get the props to de-structure.
Here 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 then am trying to pass projects and tools to my page like so.
const Home: NextPage = ({projects, tools}) => {
console.log(props);
return (
<React.Fragment>
<Nav />
<Intro />
<Contact />
<Sidebar />
<Footer />
</React.Fragment>
);
};
export default Home;
However, I am getting the following error when I do this.
"Property 'projects' does not exist on type '{ children?: ReactNode; }'."
"Property 'tools' does not exist on type '{ children?: ReactNode; }'."
Do I need to somehow apply an interface to the props? What am I doing wrong?
If I log props to the console without de-structuring, it returns the two arrays it should.
Thanks in advance!
Annotate the props:
interface IHomeProps {
projects: whatGoesHere;
tools: whatGoesHere;
children?: ReactNode; // import from react if needed
}
const Home: NextPage = ({projects, tools}: IHomeProps) => {
You should try use pageProps in your page like this:
const Home: NextPage = ({ pageProps: {projects, tools} }) => {
console.log(projects, tools);
return (
<React.Fragment>
<Nav />
<Intro />
<Contact />
<Sidebar />
<Footer />
</React.Fragment>
);
};
This is how you can get the props from getStaticProps in your page.