Question

当我在next或heroku上部署它时，我的应用程序无法正常运行。除了没有使用getInitialProps获取道具的页面之一以外，我所有的页面都能正确呈现。我正在使用useEffect，因为我需要确保令牌存在，以便在用户登录时将其与服务器创建的令牌进行比较，以便服务器可以发送请求的正确数据。一切都可以在localhost上正常运行，但是当我部署该应用程序时，该页面无法正常工作。这是代码，任何帮助将不胜感激。 next.config.js：

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

Vercel Logs:
12:51:02.854  
Read more: https://err.sh/next.js/opt-out-auto-static-optimization
12:51:03.018  
Page                                                           Size     First Load JS
12:51:03.019  
┌ λ /                                                          952 B          85.5 kB
12:51:03.019  
├   /_app                                                      1.94 kB        72.1 kB
12:51:03.019  
├ λ /404                                                       2.6 kB         74.7 kB
12:51:03.019  
├ λ /bookings/Bookings                                         883 B          85.5 kB
12:51:03.019  
├ λ /host                                                      1.03 kB        85.6 kB
12:51:03.019  
├ λ /host/[id]                                                 574 B          89.6 kB
12:51:03.019  
├ λ /host/new                                                  312 B          89.3 kB
12:51:03.019  
└ λ /houses/[id]                                               21.8 kB         106 kB
12:51:03.019  
+ First Load JS shared by all                                  72.1 kB
12:51:03.019  
  ├ static/pages/_app.js                                       1.94 kB
12:51:03.019  
  ├ chunks/cd51de3554d810d8c7ceaf1ee16efdf432e5aab4.838cae.js  11.6 kB
12:51:03.019  
  ├ chunks/commons.07e586.js                                   10.7 kB
12:51:03.019  
  ├ chunks/framework.c61f0e.js                                 40.8 kB
12:51:03.019  
  ├ chunks/styles.a0e702.js                                    93 B
12:51:03.019  
  ├ runtime/main.b6ad58.js                                     6.27 kB
12:51:03.019  
  ├ runtime/webpack.6ef28d.js                                  746 B
12:51:03.019  
  └ css/styles.2330443d.chunk.css                              3.13 kB
12:51:03.019  
λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
12:51:03.019  
○  (Static)  automatically rendered as static HTML (uses no initial props)
12:51:03.019  
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
12:51:07.814  
Traced Next.js serverless functions for external files in: 4693.896ms
12:51:08.764  
Compressed shared serverless function files: 950.419ms
12:51:09.150  
All serverless functions created in: 385.553ms
12:51:09.350  
Uploading build outputs...
12:51:13.210  
Build completed. Populating build cache...
12:51:20.629  
Uploading build cache [14.26 MB]...
12:51:21.018  
Build cache uploaded: 389.705ms
12:51:21.031  
Done with "package.json"

Booking.js

import Layout from "../../components/Layout";
import Head from "next/head";

import { useStoreActions, useStoreState } from "easy-peasy";
import { useEffect } from "react";

const Bookings = (props) => {
  const setHouseBooked = useStoreActions(
    (actions) => actions.user.setHouseBooked
  );
  const setUser = useStoreActions((actions) => actions.user.setUser);
  const data = useStoreState((state) => state.user.houseBooked);

  const fetchingDataOnMount = () => {
    const token = window.sessionStorage.getItem("token");
    if (token) {
      fetch("https://polar-refuge-69571.herokuapp.com/api/login", {
        method: "post",
        headers: {
          "content-type": "application/json",
          authorization: token,
        },
      })
        .then((res) => res.json())
        .then((data) => {
          if (data && data.id) {
            fetch(
              `https://polar-refuge-69571.herokuapp.com/api/house/bookings/list/${data.id}`,
              {
                method: "get",
                headers: {
                  "content-type": "application/json",
                  authorization: token,
                },
              }
            )
              .then((response) => response.json())
              .then((res) => {
                setHouseBooked(res);
                setUser();
              });
          }
        });
    }
  };
  useEffect(() => {
    fetchingDataOnMount();
  }, []);
  return (
    <Layout
      content={
        <div>
          <Head>
            <title>Your bookings</title>
          </Head>
          <h2>Your bookings</h2>

          <div className="bookings">
            {data && data.bookings && data.bookings.length > 0 ? (
              data.bookings.map((booking, index) => {
                return (
                  <div className="booking" key={index}>
                    <img src={booking.house.picture} alt="House picture" />
                    <div>
                      <h2>
                        {booking.house.title} in {booking.house.town}
                      </h2>
                      <p>
                        Booked from{" "}
                        {new Date(booking.booking.startDate).toDateString()} to{" "}
                        {new Date(booking.booking.endDate).toDateString()}
                      </p>
                    </div>
                  </div>
                );
              })
            ) : (
              <div>no House booked</div>
            )}
          </div>

          <style jsx>{`
            .bookings {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
              grid-gap: 40px;
            }
            .booking {
              display: grid;
              grid-template-columns: 100%;
              grid-gap: 40px;
              margin-top: 60px;
            }

            .booking img {
              width: 180px;
            }
          `}</style>
        </div>
      }
    />
  );
};

export default Bookings;

Files Setup
Components
Pages
 host
  [id].js
  index.js
  new.js
 houses
  [id].js
 _app.js
  Booking.js
  index.js
store.js

具有节点服务器部署问题的Nextjs应用

0 个答案: