如何在NEXT.JS中设置react redux firestore

由于SEO原因，我正在从我的CreateReact应用程序（客户端渲染）迁移到下一个JS（服务器端渲染）。在使用React-Redux Firebase/Firestore之前，迁移一直进展顺利。这是我尝试加载的页面：

Discover.js

import React, { Component } from 'react'
import { firestoreConnect, isEmpty } from 'react-redux-firebase';
import { compose } from 'redux'
import { connect } from "react-redux";
import { blogpostsQuery } from '../blogposts/blogpostsQuery';
import DiscoverList from "./DiscoverList";



const mapState = (state, ownProps) => {
  let blogposts = {};

  blogposts =
  !isEmpty(state.firestore.ordered.blogposts) &&
  state.firestore.ordered.blogposts;

  return {
    blogposts,
  };
};


class DiscoverPage extends Component {
  render() {
    const {blogposts} = this.props
     return (
      <div className="container">
        <div className="hero">
          <h1>Discover stories</h1>
          <p className="lead">Blogpost published:</p>
        </div>
      <DiscoverList blogposts={blogposts} />
    </div>
    )
  }
}


export default compose(
  firestoreConnect(() => blogpostsQuery()), 
  connect(mapState, null) 
)(DiscoverPage)

我不是唯一一个有这个问题的人，我已经在GitHub上找到了PrecottPrue的解决方案：

包括文件：

问题是（对不起，我是新开发人员）我不知道在哪里添加这行代码？将其添加到app.js不起作用。。我已经添加了，但仍然没有运气

-app.js

import App from "next/app";
import { Provider } from "react-redux";
import React, { Fragment } from "react";
import withRedux from "next-redux-wrapper";
import "../src/styles.css";
import configureStore from "../src/app/store/configureStore";
import Header from "../src/app/layout/Header";
import NavBar from "../src/app/layout/nav/Navbar/NavBar";
import Footer from "../src/app/layout/Footer";
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};

    //Anything returned here can be accessed by the client
    return { pageProps: pageProps };
  }

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

export default withRedux(configureStore)(MyApp);

从“下一个/App”导入应用程序；
从“react redux”导入{Provider}；
从“React”导入React，{Fragment}；
从“下一个redux包装器”导入withRedux；
导入“./src/styles.css”；
从“./src/app/store/configureStore”导入configureStore；
从“./src/app/layout/Header”导入标题；
从“./src/app/layout/nav/NavBar/NavBar”导入导航栏；
从“./src/app/layout/Footer”导入页脚；
global.XMLHttpRequest=require（'XMLHttpRequest'）。XMLHttpRequest
类MyApp扩展了应用程序{
静态异步getInitialProps（{Component，ctx}）{
const pageProps=Component.getInitialProps
？等待组件。getInitialProps（ctx）
: {};
//客户端可以访问此处返回的任何内容
返回{pageProps:pageProps}；
}
render（）{
const{Component，pageProps，store}=this.props；
返回(
);
}
}
使用Redux（configureStore）（MyApp）导出默认值；

谁能帮帮我吗

非常感谢

弗里多

 // needed to fix "Error: The XMLHttpRequest compatibility library was not found."
    global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

import App from "next/app";
import { Provider } from "react-redux";
import React, { Fragment } from "react";
import withRedux from "next-redux-wrapper";
import "../src/styles.css";
import configureStore from "../src/app/store/configureStore";
import Header from "../src/app/layout/Header";
import NavBar from "../src/app/layout/nav/Navbar/NavBar";
import Footer from "../src/app/layout/Footer";
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};

    //Anything returned here can be accessed by the client
    return { pageProps: pageProps };
  }

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

export default withRedux(configureStore)(MyApp);