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 '../../ponents/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 VideosSearch

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 '../../ponents/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 VideosSearch

It gives me

TypeError: Cannot read property 'query' of undefined

oh and btw this is from /pages/search/[query].js

• javascript
• web
• next.js

2 Answers 2

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
        }
    }
}

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