javascript - Next.js-serveren fortsetter å kjøre, men ingenting vises i nettleseren i omtrent 20 minutter

Jeg utvikler denne applikasjonen med Next.js og bruker TypeScript som språk. Jeg bruker også modul css for å style komponentene mine. Jeg initialiserte min Next-applikasjon ved å kjøre følgende kommando:

yarn create next-app .

For noen dager siden kjørte applikasjonen bra, men ikke helt jevnt. Jeg bruker Windows 10 [Windows [Version 10.0.19042.1165] og min node-versjon er v14.17.5. Jeg bruker også yarn v1.22.10. Jeg støter alltid på dette problemet når min Next-applikasjon blir stor når jeg kjører:

yarn run dev

Jeg får dette:

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: /

men det er ingenting som vises i nettleseren i mer enn 20 minutter, siden vil laste og laste og laste. Jeg vurderer å bytte til gatsby men jeg kan ikke starte hele prosessen på nytt. Hvis noen vet hvordan de kan hjelpe meg, vær så snill å hjelpe Her er min package.json-fil:

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

Her er min index.tsx også kjent som min hjemme-/-kode hvis det gir mening

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;

Svar #1

Jeg er ikke sikker, men det ser ut til å fungere i mitt tilfelle. Når jeg starter serveren med en annen port (ikke standard 3000) fungerer det helt fint next dev -p 1234

Svar #2

Å kjøre det i et inkognitovindu fungerte for meg

Relaterte artikler