Estoy creando una aplicación con Next JS y mecanografiado. Estoy tratando de llamar datos desde una API con getStaticProps y luego desestructurar los accesorios devueltos. Por alguna razón, no puedo hacer que los accesorios se desestructuran.
Aquí está mi función getStaticProps.
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, }, }; }Luego estoy tratando de pasar proyectos y herramientas a mi página de esa manera.
const Home: NextPage = ({projects, tools}) => { console.log(props); return ( <React.Fragment> <Nav /> <Intro /> <Contact /> <Sidebar /> <Footer /> </React.Fragment> ); }; export default Home;Sin embargo, recibo el siguiente error cuando hago esto.
"Property 'projects' does not exist on type '{ children?: ReactNode; }'." "Property 'tools' does not exist on type '{ children?: ReactNode; }'."¿Necesito aplicar de alguna manera una interfaz a los accesorios? ¿Qué estoy haciendo mal?
Si registro accesorios en la consola sin desestructurar, devuelve las dos matrices que debería.
¡Gracias por adelantado!
Anota los accesorios:
interface IHomeProps { projects: whatGoesHere; tools: whatGoesHere; children?: ReactNode; // import from react if needed } const Home: NextPage = ({projects, tools}: IHomeProps) => {Debería intentar usar pageProps en su página de esta manera:
const Home: NextPage = ({ pageProps: {projects, tools} }) => { console.log(projects, tools); return ( <React.Fragment> <Nav /> <Intro /> <Contact /> <Sidebar /> <Footer /> </React.Fragment> ); };Así es como puede obtener los accesorios de getStaticProps en su página.