Next.js - 页面没有让 GetServerSideProps 进入页面组件道具（使用自定义 _app.js）

Posted 2023-03-06

【中文标题】Next.js - 页面没有让 GetServerSideProps 进入页面组件道具（使用自定义 _app.js）

【英文标题】：Next.js - Page not getting GetServerSideProps into Page component props (with custom _app.js)

【发布时间】：2020-07-06 14:54:31

【问题描述】：

我一直在尝试将 GetServerSideProps 添加到我的 Next.js 应用程序中，但是在尝试这样做时，响应数据没有被注入到页面道具中。 查看网络选项卡时，我看到pageName.json 生成，因此正在执行调用并获取数据，它只是没有作为道具进入页面。

这是我的页面组件.ts

import  useState  from "react";
import  url  from "../app/helpers/api/apiEnvs";
import  Button, Spin, Skeleton  from "antd";
import  MailOutlined, LoadingOutlined  from '@ant-design/icons';
import withLayout from "../app/components/Layout";
import './quotes.scss'

export const getServerSideProps = async (ctx) => 
const res = await fetch(`$url/estimator/start`,
        
            method: 'POST',
            headers: 
                'Content-Type': 'application/json'
            ,
        );
    const estimator = await res.json();
    return 
        props:  estimator 
    ;
;


const Quotes = (props: any) => 

    const [loading, setLoading] = useState(false);
    const antIcon = <LoadingOutlined style= fontSize: 24  spin />;

    return (
        <div className="quotesContainer">
            <h1>Cotizador</h1>
            <div className="quoteBox quoteStepper">
            <MailOutlined/>
            </div>
            <div className="quoteBox quoteContent">
            loading
                ? <Spin indicator=antIcon />
            : <div>
                    <Skeleton.Input style= width: '300px'  active=true size="large" />
                    <p>props.estimation ? props.estimation: 'No estimation'</p>

                    <Skeleton.Button style= width: '90px'  active=true size="default" />
                    <Button type="primary">
                        Next
                    </Button>
              </div>
            
            </div>
        </div>
    );
;

export default withLayout(Quotes);

自定义 _app.js 组件

import 'antd/dist/antd.css';

export default function App( Component, pageProps ) 
    return <Component ...pageProps />

network tab中显示的数据截图

会不会和有ts页面和.js _app有关？

【参考方案1】：

看起来加载的道具不会通过您的 withLayout-wrapper。 你可以发布你的 withLayout-wrapper 的内容吗？

我在使用 next-redux-wrapper 的 withRedux-wrapper 时遇到了同样的问题。 包装器内部应该是一个静态异步 getInitialProps 函数，它的作用与 next 本身的默认 getInitialProps 相同：

async function appGetInitialProps( Component, ctx:AppContext): Promise<AppInitialProps> 
    const pageProps = await loadGetInitialProps(Component, ctx)
    return  pageProps 

next自带的loadGetInitialProps函数，可以从next/dist/next-server/lib/utils导入

【讨论】：

这里是withLayout组件import React from 'react';import Header from "./header";const withLayout = (Page: any) => return () => ( <div> <Header/> <Page /> </div> ); ;export default withLayout;

所以，我发现你是正确的，是。包装器，但我不知道如何使您的功能正常工作，所以也许我必须重构包装器。谢谢！

【参考方案2】：

所以，问题出在包装器上，

注意：在 _app.js 中使用布局组件（在我的例子中是在洞应用程序中）

【讨论】：

这是什么意思？

我不明白 :-(

您将在此处获得更多信息：github.com/vercel/next.js/discussions/15993

【参考方案3】：

尝试像这样更改 _app.js

  static async getInitialProps(appContext) 

    const appProps = await App.getInitialProps(appContext);

    if (!Object.keys(appProps.pageProps).length) 
      delete appProps.pageProps;
    

    return appProps;
  

如果 _app getInitialProps 返回的是空对象。 NextJs 将使用从 getServerSideProps 返回的 props（如果可用）

【参考方案4】：

可能有自定义_app.js，您必须在其中调用getInitialProps。 需要修改一下

static async getInitialProps( Component, ctx ) 
     const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;

    if (Object.keys(pageProps).length > 0) 
      // return pageProps only when its present
      return  pageProps ; 
    
    
    return ;
  

是的，您必须在 pageProps 存在时返回它。