Redux getStaticProps在prod和dev处返回空对象（下一个v9.5.1）_Redux_Next.js

Redux getStaticProps在prod和dev处返回空对象（下一个v9.5.1）

redux next.js

Redux getStaticProps在prod和dev处返回空对象（下一个v9.5.1）,redux,next.js,Redux,Next.js,我遇到了一个奇怪的问题。使用最新的nextjs@9.5.1 下面是有问题的代码： import Header from './header'; import Head from './head'; import Footer from './footer'; import { useEffect } from 'react'; import Utils from '../util/utils'; import { hostName } from '../config/variables'; f

我遇到了一个奇怪的问题。使用最新的nextjs@9.5.1 下面是有问题的代码：

import Header from './header';
import Head from './head';
import Footer from './footer';
import { useEffect } from 'react';
import Utils from '../util/utils';
import { hostName } from '../config/variables';

function Privacy({ pageTitle, metaTitle, description, metaDescription, url }) {
    console.log("Privacy -> pageTitle", pageTitle)
    useEffect(() => {
        Utils.handleFBPixelPageView('Privacy');
    }, []);

    return (
        <div>
            <Head
                isAmpPage={false}
                pageTitle={pageTitle}
                description={description}
                url={url}
                metaTitle={metaTitle}
                metaDescription={metaDescription}
            />
            <Header isAmp={false} />
            <div className="privacy-main-panel">

            Hello there!
            </div>

            <style jsx global>{`
                .privacy-main-panel {
                    width: 1000px;
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                    font-family: inherit;
                    padding-top: 20px;
                    margin: 0 auto;
                }
                h1 {
                    padding: 0;
                    margin: 5px 0;
                    line-height: 1;
                    margin-bottom: 25px;
                }
                h2,
                h3 {
                    padding: 0;
                    margin: 5px 0;
                    line-height: 1;
                }
                p {
                    margin-bottom: 10px;
                }
                ul {
                    margin: 0;
                    margin-bottom: 20px;
                }
                @media only screen and (max-width: 1000px) {
                    .privacy-main-panel {
                        width: 100vw;
                        padding: 20px;
                    }
                }
            `}</style>
            <Footer isVisibleOnMobile={true} />
        </div>
    );
}

export async function getStaticProps() {
    return {
        props: {
            pageTitle: 'text1',
            metaTitle: 'text2',
            description: 'text3',
            metaDescription: 'text4',
            url: `${hostName}/privacy`,
        },
    };
}

export default Privacy;

更新2：问题似乎出现在定制应用程序中：

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

Component.getInitialProps未定义，因此pageProps返回空对象

这是否意味着getStaticProps实际上不会在自定义应用程序中将道具传递给getInitialProps

更新3： AppProp和PageProp均为空：

 const pageProps = AppContext.Component.getInitialProps ? 
     await AppContext.Component.getInitialProps(AppContext.ctx)
     : {};

 console.log('MyApp -> getInitialProps -> pageProps', pageProps);

 const appProps = App.getInitialProps ? await App.getInitialProps(AppContext): {};
 console.log('MyApp -> getInitialProps -> appProps', appProps);

更新4：这是一个定制的应用程序，如果有人想看到它，因为它可能是一个问题：

import withRedux from 'next-redux-wrapper';
import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Amplify from 'aws-amplify';
import ReactPixel from 'react-facebook-pixel';
import Router from 'next/router';
import withGA from 'next-ga';
import * as Sentry from '@sentry/browser';
import MobileBarController from '../components/mobile-bar-controller';
import rootReducer from '../store/reducers/root-reducer';
import { userLogin } from '../store/actions/actions';
import Utils from '../util/utils';
import {
    apiUrl,
    facebookPixelId,
    sentryDsnFrontend,
} from '../config/variables';


const makeStore = (initialState, options) => {
    return createStore(rootReducer, initialState);
};

Amplify.configure({
    Auth: {
        identityPoolId: 'id',
        region: 'region',
    },
    API: {
        graphql_endpoint: apiUrl,
        region: 'region',
        identityPoolId: 'poolId',
    },
    bucket: 'items-bucket',
});

Sentry.init({
    dsn: `${sentryDsnFrontend}`,
});
class MyApp extends App {
    constructor(props) {
        super(props);
        if (!Utils.isServer()) {
            let user = Utils.getCookieAsJson('persist:user');
            let token = Utils.getCookie('user_token');
            if (user && token) {
                props.store.dispatch(userLogin(user, token));
            }
        }
    }
    static async getInitialProps({ Component, ctx }) {
        if (
            Utils.isServer() &&
            ctx &&
            ctx.req &&
            ctx.req.headers &&
            ctx.req.headers.cookie
        ) {
            let cookie = ctx.req.headers.cookie;
            if (cookie) {
                let cookies = cookie.split(';');
                let user = null;
                let token = null;

                for (let i = 0; i < cookies.length; i++) {
                    if (cookies[i].indexOf('persist:user') > -1) {
                        user = JSON.parse(
                            unescape(cookies[i].replace('persist:user=', ''))
                        );
                    } else if (cookies[i].indexOf('user_token') > -1) {
                        token = cookies[i].replace('user_token=', '');
                    }
                }
                if (user && token) {
                    ctx.store.dispatch(userLogin(user, token));
                }
            }
        }
        const pageProps = Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {};
        return { pageProps };
    }

    componentDidMount() {
        ReactPixel.init(
            facebookPixelId,
            {},
            { debug: false, autoConfig: false }
        );
    }

    componentDidCatch(error, errorInfo) {
        Sentry.withScope((scope) => {
            Object.keys(errorInfo).forEach((key) => {
                scope.setExtra(key, errorInfo[key]);
            });

            Sentry.captureException(error);
        });

        super.componentDidCatch(error, errorInfo);
    }

    render() {
        const { Component, pageProps, store } = this.props;
        return (
            <Provider store={store}>
                <Component {...pageProps} />
                <MobileBarController />
            </Provider>
        );
    }
}

export default withRedux(makeStore)(withGA('GA-ID', Router)(MyApp));

从“下一个redux包装器”导入withRedux；
从“下一个/应用程序”导入应用程序；
从“React”导入React；
从'react redux'导入{Provider}；
从“redux”导入{createStore}；
从“aws放大”导入放大；
从“react facebook pixel”导入react pixel；
从“下一个/路由器”导入路由器；
从“下一个ga”使用ga导入；
从“@Sentry/browser”导入*作为哨兵；
从“../components/mobile bar controller”导入MobileBarController；
从“../store/reducers/root reducer”导入rootReducer；
从“../store/actions/actions”导入{userLogin}；
从“../util/Utils”导入Utils；
进口{
阿皮乌尔，
facebookPixelId，
哨兵前线，
}来自“../config/variables”；
const makeStore=（初始状态，选项）=>{
返回createStore（rootReducer，initialState）；
};
放大({
认证：{
identityPoolId:'id'，
地区：'地区'，
},
API:{
graphql_端点：apiUrl，
地区：'地区'，
identityPoolId:'poolId'，
},
bucket:'项目bucket'，
});
哨兵({
dsn:“${Sentrydsnfront}”，
});
类MyApp扩展了应用程序{
建造师（道具）{
超级（道具）；
如果（！Utils.isServer（））{
让user=Utils.getCookieAsJson（'persist:user'）；
let token=Utils.getCookie（'user_token'）；
if（用户和令牌）{
props.store.dispatch（userLogin（user，token））；
}
}
}
静态异步getInitialProps（{Component，ctx}）{
如果(
Utils.isServer（）&&
ctx&&
ctx.req&&
ctx.req.headers&&
ctx.req.headers.cookie
) {
让cookie=ctx.req.headers.cookie；
如果（cookie）{
让cookies=cookie.split（“；”）；
让user=null；
让token=null；
for（设i=0；i-1）{
user=JSON.parse(
unescape（cookies[i].replace（'persist:user='，''）
);
}else if（cookies[i].indexOf（'user\u token'）>-1）{
令牌=cookies[i]。替换（'user_-token='，''）；
}
}
if（用户和令牌）{
ctx.store.dispatch（userLogin（user，token））；
}
}
}
const pageProps=Component.getInitialProps
？等待组件。getInitialProps（ctx）
: {};
返回{pageProps}；
}
componentDidMount（）{
ReactPixel.init(
facebookPixelId，
{},
{调试：错误，自动配置：错误}
);
}
componentDidCatch（错误，errorInfo）{
哨兵用望远镜（（范围）=>{
Object.keys（errorInfo）.forEach（（key）=>{
scope.setExtra（key，errorInfo[key]）；
});
Sentry.captureException（错误）；
});
super.componentDidCatch（error，errorInfo）；
}
render（）{
const{Component，pageProps，store}=this.props；
返回(
);
}
}
导出默认withRedux（makeStore）（withGA（'GA-ID'，路由器）（MyApp））；

更新5：您可以在此处找到复制：

因此，基本上这个问题与下一个redux包装包有关。它是在最新的Nextjs特性之后更新的，因此当我将项目更新到v9.5.1时，getStaticProps不起作用，因为我从未升级过下一个redux包装器版本或配置

希望这能在将来节省一些人的时间。正如Nextjs contributor所建议的，这里的示例解释了这一切

import withRedux from 'next-redux-wrapper';
import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Amplify from 'aws-amplify';
import ReactPixel from 'react-facebook-pixel';
import Router from 'next/router';
import withGA from 'next-ga';
import * as Sentry from '@sentry/browser';
import MobileBarController from '../components/mobile-bar-controller';
import rootReducer from '../store/reducers/root-reducer';
import { userLogin } from '../store/actions/actions';
import Utils from '../util/utils';
import {
    apiUrl,
    facebookPixelId,
    sentryDsnFrontend,
} from '../config/variables';


const makeStore = (initialState, options) => {
    return createStore(rootReducer, initialState);
};

Amplify.configure({
    Auth: {
        identityPoolId: 'id',
        region: 'region',
    },
    API: {
        graphql_endpoint: apiUrl,
        region: 'region',
        identityPoolId: 'poolId',
    },
    bucket: 'items-bucket',
});

Sentry.init({
    dsn: `${sentryDsnFrontend}`,
});
class MyApp extends App {
    constructor(props) {
        super(props);
        if (!Utils.isServer()) {
            let user = Utils.getCookieAsJson('persist:user');
            let token = Utils.getCookie('user_token');
            if (user && token) {
                props.store.dispatch(userLogin(user, token));
            }
        }
    }
    static async getInitialProps({ Component, ctx }) {
        if (
            Utils.isServer() &&
            ctx &&
            ctx.req &&
            ctx.req.headers &&
            ctx.req.headers.cookie
        ) {
            let cookie = ctx.req.headers.cookie;
            if (cookie) {
                let cookies = cookie.split(';');
                let user = null;
                let token = null;

                for (let i = 0; i < cookies.length; i++) {
                    if (cookies[i].indexOf('persist:user') > -1) {
                        user = JSON.parse(
                            unescape(cookies[i].replace('persist:user=', ''))
                        );
                    } else if (cookies[i].indexOf('user_token') > -1) {
                        token = cookies[i].replace('user_token=', '');
                    }
                }
                if (user && token) {
                    ctx.store.dispatch(userLogin(user, token));
                }
            }
        }
        const pageProps = Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {};
        return { pageProps };
    }

    componentDidMount() {
        ReactPixel.init(
            facebookPixelId,
            {},
            { debug: false, autoConfig: false }
        );
    }

    componentDidCatch(error, errorInfo) {
        Sentry.withScope((scope) => {
            Object.keys(errorInfo).forEach((key) => {
                scope.setExtra(key, errorInfo[key]);
            });

            Sentry.captureException(error);
        });

        super.componentDidCatch(error, errorInfo);
    }

    render() {
        const { Component, pageProps, store } = this.props;
        return (
            <Provider store={store}>
                <Component {...pageProps} />
                <MobileBarController />
            </Provider>
        );
    }
}

export default withRedux(makeStore)(withGA('GA-ID', Router)(MyApp));