I dont know if this a dumb question, but im working with a django api, and im trying to implement pagination on the search page, im very new to Next.js, ive search the web for an answer but nothing, here is the code, from the error, it made me believe that i cant pass "context" and "query : {page = 1}" at the same time, or something like that, is there any workaround this?
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 gives me
TypeError: Cannot read property 'query' of undefined
oh and btw this is from /pages/search/[query].js
Actually context parameter has everything you need
export async function getServerSideProps(context) {...}
to get parameter from url do this
const { page, query}= context.req.params
You are able to access the params and query on the context object. getServerSideProps will only receive a single context parameter with the various keys.
Assuming you have /pages/search/[query].jsx which supports /search/sith or /search/sith?page=2
You need to modify slightly as per:
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
}
}
}