我正在使用Next.js开发这个应用程序，我使用typescript作为一种语言。我还使用模块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;

尝试重写你的_app. js文件。它可以帮助解决你的问题。我正在使用带有ts和material UI的next.js。你可以使用下面的代码并替换它。

// pages/_app.tsx

import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

export default function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
}