Question

156

How do i pass more things on getServerSideProps() in Next.js

rated 0 times [ 160] [ 4] / answers: 1 / hits: 7514 / 3 Years ago, tue, september 14, 2021, 12:00:00

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 VideosSearch

It gives me

TypeError: Cannot read property 'query' of undefined

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

michaelashelbieh questions

1 Nuxt 3 - resolver.resolveModule is not a function

Sat, Nov 13, 21, 00:00, 3 Years ago

1 .env file not updating in local environment in react js

Fri, Sep 17, 21, 00:00, 3 Years ago

1 TypeError: Cannot read property 'split' of undefined in discord and nodejs

Sun, Jan 17, 21, 00:00, 3 Years ago

1 Bootstrap Accordion rotate icon when open

Mon, Aug 31, 20, 00:00, 4 Years ago

1 How to flatten an object with nested objects in javascript

Mon, Apr 20, 20, 00:00, 4 Years ago

View All

answered 3 Years ago turnerf · Accepted Answer

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

        }

    }

}