Tengo problemas para averiguar cómo pasar datos de un componente a getServerSideProps, básicamente lo que quiero es obtener el valor de la entrada de texto y usarlo como palabra clave en mi llamada a la API. La entrada de texto se ubicará en un componente "Barra de búsqueda" que será visible en cada página de mi aplicación y al hacer clic en el botón Quiero hacer la llamada a la API usando el valor de la entrada en una página adecuada llamada "Resultados de búsqueda". ¿Cuál es la mejor manera de hacer eso?
Barra de búsqueda:
import { useState } from 'react'; export default function SearchBar() { const [keyword, setKeyword] = useState(''); const handleClick = (event) => { event.preventDefault(); console.log(keyword); }; return ( <div> <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} /> <button onClick={handleClick}>Fetch</button> </div> ); }Resultados de la búsqueda:
import { GetServerSideProps } from 'next'; export const getServerSideProps: GetServerSideProps = async (context) => { const { keyword } = context; const res = await fetch( `https://www.googleapis.com/books/v1/volumes?q=${keyword}` ); const data = await res.json(); return { props: {} }; }; export default function SearchResults() { return ( <div> <h1>Teste</h1> </div> ); }Supongo que su llamada api para la entrada de texto será una llamada del lado del cliente, porque necesita la interacción del cliente además.
Así que no hay necesidad de hacer llamadas del lado del servidor.
Solo onChange llame a su api, y se hará.
import { useState } from 'react'; export default function SearchBar() { const [keyword, setKeyword] = useState(''); const handleClick = (event) => { event.preventDefault(); fetchData(keyword); }; const fetchData = async(keyword) => { const res = await fetch( `https://www.googleapis.com/books/v1/volumes?q=${keyword}` ); const data = await res.json(); }; return ( <div> <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} /> <button onClick={handleClick}>Fetch</button> </div> ); }por último, puede envolver su componente con diseño, de modo que su componente de búsqueda sea visible en todas las páginas.
// pages/_app.js import SearchComponent from '../components/SearchComponent' export default function MyApp({ Component, pageProps }) { return ( <div> <SearchComponent/> <Component {...pageProps} /> </div> ) }Consulte aquí para los diseños de nextjs
envuelves la entrada con el formulario:
<form onSubmit={submitHandler} > <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} /> </form>escribe el controlador de envío:
const submitHandler = (event) => { event.preventDefault(); if (keyword) { Router.push({ // whatever your baseUrl pathname: process.env.BASE_URL, query: { keyword: keyword, page: 1 }, }); // Optional } else if (keyword === "") { Router.push({ pathname: "", query: { page: 1 } }); } else { Router.push(Router.router.asPath); } };luego, en getServerSideProps, llega a la consulta de la forma en que escribió el código