Next.js - 页面未将 GetServerSideProps 放入页面组件道具中（使用自定义 _app.js）

Question

I've been trying to add GetServerSideProps to my Next.js app, but when trying to do so, the response data is not being injected into the page props. When looking into the Network Tab, i see the pageName.json generating, so the call is being executed and the data being fetched, it just doesn't get into the Page as Props.

Here's my page component.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);

Custom _app.js Component

import 'antd/dist/antd.css';

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

screenshot of the data being displayed in the network tab

could it be related to having ts pages and .js _app?

Answer 1

It looks like the loaded props wont passed through your withLayout-wrapper. Can u post the content of your withLayout-wrapper?

I had the same problem with the withRedux-wrapper from next-redux-wrapper. Inside the wrapper should be a static async getInitialProps function which do the same like the default getInitialProps from next itself:

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

The loadGetInitialProps function comes with next and can be be imported from next/dist/next-server/lib/utils

Answer 2

Try change _app.js like this

  static async getInitialProps(appContext) {

    const appProps = await App.getInitialProps(appContext);

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

    return appProps;
  }

If the return of _app getInitialProps is empty object. NextJs will use the props returned from getServerSideProps if available

Answer 3

There might be custom _app.js in which you must be calling getInitialProps . there some modification is required

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

yes, you have to return pageProps only when it is present.

Answer 4

So, the issue was with the wrapper,

Note: Use Layout components (which in my case is in the hole app) inside _app.js