javascript - Next.js 服务器继续运行，但浏览器中大约 20 分钟没有显示任何内容

Question

Next.js我正在使用打字稿作为一种语言来开发这个应用程序。我也在使用模块css来设置我的组件的样式。我通过运行以下命令初始化了我的下一个应用程序：

yarn create next-app .

然后几天前，该应用程序运行良好，但并不顺利。我正在使用window 10 [Windows [Version 10.0.19042.1165]，我的节点版本是v14.17.5我也在使用yarn v1.22.10. 当我的下一个应用程序在运行时变大时，我总是会遇到这个问题：

yarn run dev

我明白了：

yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from ....
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - build page: /

但是浏览器中没有任何内容显示超过20分钟页面将加载和加载和加载。我正在考虑更改为使用gastby，但我无法重新启动整个过程。如果有人知道如何帮助我，请帮助这是我的package.json文件：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/client": "^3.4.10",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "axios": "^0.21.1",
    "firebase": "^9.0.0",
    "graphql": "^15.5.2",
    "next": "11.1.0",
    "node-sass": "4.14.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.2.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0",
    "typescript": "^4.4.2"
  }
}

这是我的index.tsx又名我的家庭/代码，如果它可能有意义的话

import { NextPage } from "next";
import React from "react";
import styles from "../styles/Home.module.css";
import Header from "../components/minor/flesh/Header/Header";
import HeaderSkeleton from "../components/minor/skeletons/components/Header/HeaderSkeleton";
import Fleets from "../components/minor/flesh/Fleets/Fleets";
import FleetsSkeleton from "../components/minor/skeletons/components/Fleets/FleetsSkeleton";
import Form from "../components/minor/flesh/Form/Form";
import { IoIosCreate } from "react-icons/io";
import { IconButton } from "@material-ui/core";
import { ThemeType } from "../types/major";
import FormSkeleton from "../components/minor/skeletons/components/Form/FormSkeleton";
import { useQuery } from "@apollo/client";

import HELLO_WORLD_QUERY from "../graphql/queries/hello/hello";
import Post from "../components/minor/flesh/Post/Post";
import { useSelector } from "react-redux";
import PostSkeleton from "../components/minor/skeletons/components/Post/PostSkeleton";
import { apolloClient } from "../lib/apolloClient";
import USER_QUERY from "../graphql/queries/user/user";
import { useRouter } from "next/router";
interface Props {
  data: any;
}

const Home: NextPage<Props> = ({ data }) => {
  data = JSON.parse(data);
  const router = useRouter();

  const [showForm, setShowForm] = React.useState(false);
  const theme = useSelector((state: any) => state.theme);
  const className: string = `${styles.app} ${
    theme === "dark" ? styles.dark__theme : styles.light__theme
  }`;
  return (
    <div className={className}>
      {/* <Header theme="light" /> */}
      <HeaderSkeleton theme={theme} />
      {/* <FormSkeleton theme={theme} /> */}
      {showForm ? <Form theme={theme} setShowForm={setShowForm} /> : null}
      <div className={styles.app__main}>
        <Fleets theme={theme} />
        <FleetsSkeleton theme={theme} />
        <PostSkeleton theme={theme} />
        <PostSkeleton theme={theme} />
        <PostSkeleton theme={theme} />
        <PostSkeleton theme={theme} />
        <PostSkeleton theme={theme} />
        <Post theme={theme} />
        <Post theme={theme} />
        <Post theme={theme} />
        <Post theme={theme} />
      </div>
      <IconButton title="new post" onClick={() => setShowForm(true)}>
        <IoIosCreate className={styles.home__create__post__icon} />
      </IconButton>
    </div>
  );
};

Home.getInitialProps = async (context) => {
  const user = await apolloClient.query({
    query: USER_QUERY,
  });
  if (!user.data?.user) {
    context.res.writeHead(307, { Location: "http://localhost:3000/welcome" });
    return {
      data: null,
    };
  }
  return {
    data: JSON.stringify(user, null, 2),
  };
};
export default Home;

标签： javascripttypescriptnext.js