javascript - How do i pass more things on getServerSideProps() in Next.js - Stack Overflow

admin管理员组

文章数量:1435859

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

Share Improve this question Follow edited Sep 14, 2021 at 20:37 juliomalves 50.7k2323 gold badges178178 silver badges169169 bronze badges asked Sep 14, 2021 at 16:56 DennisDennis 311 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

本文标签： javascriptHow do i pass more things on getServerSideProps() in NextjsStack Overflow