我如何在 Next.js 中的 getServerSideProps() 上传递更多内容答案

【问题标题】：How do i pass more things on getServerSideProps() in Next.js我如何在 Next.js 中的 getServerSideProps() 上传递更多内容
【发布时间】：2021-11-09 20:56:34
【问题描述】：

我不知道这是否是一个愚蠢的问题，但我正在使用 django api，并且我试图在搜索页面上实现分页，我对 Next.js 非常陌生，我在网上搜索答案但什么也没有，在这里是代码吗，从错误中，它让我相信我不能同时传递“上下文”和“查询：{page = 1}”，或者类似的东西，有什么解决方法吗？

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

它给了我

TypeError: 无法读取未定义的属性“查询”

哦，顺便说一句，这是来自 /pages/search/[query].js

【问题讨论】：

标签： javascript web next.js

【解决方案1】：

您可以访问参数并查询 context 对象。 getServerSideProps 只会接收一个带有各种键的上下文参数。

假设您有支持/search/sith 或/search/sith?page=2 的/pages/search/[query].jsx

你需要稍微修改一下：

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

【讨论】：

效果很好，但我还有一个问题，如何从组件访问“页面”？
你能详细说明你的意思——你想在哪里访问页面变量？
我需要视频搜索组件中的变量
const VideosSearch = ({videos, page}) => {

【解决方案2】：

其实上下文参数有你需要的一切

export async function getServerSideProps(context) {...}

从 url 获取参数这样做

const { page, query}= context.req.params

【讨论】：