Not sure if this is a silly question, but I am currently working with a Django API and attempting to implement pagination on the search page using Next.js. As a newbie to Next.js, I have scoured the web for a solution but haven't found anything helpful yet. The error in my code seems to indicate that passing both "context" and "query: {page = 1}" simultaneously might not work. Is there a way around this issue?
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 VideosSearchIt's throwing me an error that says:
TypeError: Cannot read property 'query' of undefined
By the way, this code snippet is from /pages/search/[query].js