No sé si es una pregunta tonta, pero estoy trabajando con una API de django, y estoy tratando de implementar la paginación en la página de búsqueda, soy muy nuevo en Next.js, he buscado una respuesta en la web pero nada, aquí está el código , por el error, me hizo creer que no puedo pasar "contexto" y "consulta: {página = 1}" al mismo tiempo, o algo así, ¿hay alguna solución?
import Video from '../../components/video' const VideosSearch = ({results: videos, page}) => { return( <> <div> {videos.length > 0 && videos.map ((video) => <Video key={video.id} {...video} />)} </div> <button onClick={() => router.push(`/videos?page=${page + 1}`)}> next </button> </> ) } export async function getServerSideProps(context, {query: {page = 1}}){ const start = +page === 1 ? 0 : (+page - 1) * 3 const res = await fetch(`http://localhost:8000/api/videos/?offset=${start}&ordering=-list_date&search=${context.params.query}`) const json = await res.json() const videos = json return{ props: { results: videos.results, page: +page } } } export default VideosSearchMe da
TypeError: no se puede leer la propiedad 'consulta' de indefinido
ah y por cierto esto es de /pages/search/[query].js
En realidad, el parámetro de contexto tiene todo lo que necesitas.
export async function getServerSideProps(context) {...}para obtener el parámetro de url haz esto
const { page, query}= context.req.paramsPuede acceder a los parámetros y consultar el objeto de contexto . getServerSideProps solo recibirá un único parámetro de contexto con las distintas claves.
Suponiendo que tiene /pages/search/[query].jsx que admite /search/sith o /search/sith?page=2
Necesita modificar ligeramente según:
export async function getServerSideProps(context) { const page = context.query.hasOwnProperty('page') ? parseInt(context.query.page, 10) : 1; const start = (page - 1) * 3; console.info(context.params.query, page, start); const res = await fetch(`http://localhost:8000/api/videos/?offset=${start}&ordering=-list_date&search=${context.params.query}`) const json = await res.json() const videos = json; return{ props: { results: videos.results, page: page } } }