Next.js中如何在getServerSideProps传递多参数对接Django实现搜索分页

错误原因 #

getServerSideProps 只能接收1个context参数，你声明的第二个参数没有实际传入值，是undefined，因此读取query属性时触发报错。所有路由相关的参数（包括动态路由参数、URL查询参数）都可以直接从context对象中获取，不需要额外传参。

需调整的核心点 #

• 删除getServerSideProps的第二个参数，直接从context.query中获取分页参数page并设置默认值1
• 组件内补充导入useRouter，否则调用router.push会触发未定义报错
• 修正分页跳转路径，你当前页面路径为/pages/search/[query].js，跳转时需要保留当前搜索关键词，不能错跳至/videos路径

修正后完整代码 #

import { useRouter } from 'next/router'
import Video from '../../components/video'

const VideosSearch = ({results: videos, page}) => {
    const router = useRouter()
    // 获取当前搜索关键词用于分页跳转
    const { query } = router.query
    return(
        <>
        <div>
            {videos.length > 0 && videos.map ((video) =>
            <Video key={video.id} {...video} />)}
        </div>
        <button onClick={() => router.push(`/search/${query}?page=${page + 1}`)}> 下一页 </button>
        </>
    )
}

export async function getServerSideProps(context){
    // 统一从context.query取动态路由参数和分页参数，page默认值为1
    const { query, page = 1 } = context.query
    const start = +page === 1 ? 0 : (+page - 1) * 3
    const res = await fetch(`http://localhost:8000/api/videos/?offset=${start}&ordering=-list_date&search=${query}`)

    const json = await res.json()
    return{
        props: {
            results: json.results,
            page: +page
        }
    }
}

export default VideosSearch

内容的提问来源于stack exchange，提问作者Dennis