I'm developing this application with Next.js i'm using typescript as a language. I'm also using module css to style my ponents. I initialized my next application by running the following mand:
yarn create next-app .
Then few days back the application was running fine but not smoothly though. I'm using window 10 [Windows [Version 10.0.19042.1165] and my node version is v14.17.5 I'm also using yarn v1.22.10. I always face this problem when my next application grows large when I run:
yarn run dev
I get this:
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
event - piled successfully
event - build page: /
wait - piling...
event - build page: /
but there's nothing that is displayed in the browser for more than 20 min the page will be loading and loading and loading. I'm thinking of changing to use gastby but i can't restart the whole process. If someone knows how to help me please help Here is my package.json file:
{
"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"
}
}
Here is my index.tsx aka my home / code if it may make sense
import { NextPage } from "next";
import React from "react";
import styles from "../styles/Home.module.css";
import Header from "../ponents/minor/flesh/Header/Header";
import HeaderSkeleton from "../ponents/minor/skeletons/ponents/Header/HeaderSkeleton";
import Fleets from "../ponents/minor/flesh/Fleets/Fleets";
import FleetsSkeleton from "../ponents/minor/skeletons/ponents/Fleets/FleetsSkeleton";
import Form from "../ponents/minor/flesh/Form/Form";
import { IoIosCreate } from "react-icons/io";
import { IconButton } from "@material-ui/core";
import { ThemeType } from "../types/major";
import FormSkeleton from "../ponents/minor/skeletons/ponents/Form/FormSkeleton";
import { useQuery } from "@apollo/client";
import HELLO_WORLD_QUERY from "../graphql/queries/hello/hello";
import Post from "../ponents/minor/flesh/Post/Post";
import { useSelector } from "react-redux";
import PostSkeleton from "../ponents/minor/skeletons/ponents/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/wele" });
return {
data: null,
};
}
return {
data: JSON.stringify(user, null, 2),
};
};
export default Home;
I'm developing this application with Next.js i'm using typescript as a language. I'm also using module css to style my ponents. I initialized my next application by running the following mand:
yarn create next-app .
Then few days back the application was running fine but not smoothly though. I'm using window 10 [Windows [Version 10.0.19042.1165] and my node version is v14.17.5 I'm also using yarn v1.22.10. I always face this problem when my next application grows large when I run:
yarn run dev
I get this:
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/docs/messages/webpack5
event - piled successfully
event - build page: /
wait - piling...
event - build page: /
but there's nothing that is displayed in the browser for more than 20 min the page will be loading and loading and loading. I'm thinking of changing to use gastby but i can't restart the whole process. If someone knows how to help me please help Here is my package.json file:
{
"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"
}
}
Here is my index.tsx aka my home / code if it may make sense
import { NextPage } from "next";
import React from "react";
import styles from "../styles/Home.module.css";
import Header from "../ponents/minor/flesh/Header/Header";
import HeaderSkeleton from "../ponents/minor/skeletons/ponents/Header/HeaderSkeleton";
import Fleets from "../ponents/minor/flesh/Fleets/Fleets";
import FleetsSkeleton from "../ponents/minor/skeletons/ponents/Fleets/FleetsSkeleton";
import Form from "../ponents/minor/flesh/Form/Form";
import { IoIosCreate } from "react-icons/io";
import { IconButton } from "@material-ui/core";
import { ThemeType } from "../types/major";
import FormSkeleton from "../ponents/minor/skeletons/ponents/Form/FormSkeleton";
import { useQuery } from "@apollo/client";
import HELLO_WORLD_QUERY from "../graphql/queries/hello/hello";
import Post from "../ponents/minor/flesh/Post/Post";
import { useSelector } from "react-redux";
import PostSkeleton from "../ponents/minor/skeletons/ponents/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/wele" });
return {
data: null,
};
}
return {
data: JSON.stringify(user, null, 2),
};
};
export default Home;
8 Answers
Reset to default 2I am not sure, but it seems to work in my case. When I start server with different port (not the default 3000) it works just fine next dev -p 1234
Running it in an incognito window worked for me
In my case, the build information was somewhat corrupt.
So I had to remove the ./.next folder and could then yarn|npm run dev again.
Do a hard reload (Ctrl + Shift + R) if not running on port 3000.
I just had this same issue, localhost:3000 wasn't showing anything for about 15 minutes.
Please check if you made changes to your config file, "I hadn't". So I fixed it by going to next.cofig.js file and pressing Ctrl + Z, but changed nothing. This tricked Next.js to think there's a change in there.
Then I restarted the server and it displayed fine.
Just hit Ctrl + click on http://localhost:3000 from terminal.
You will get the below result to perform the above operation in the terminal after yearn dev or npm run dev.
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - piled client and server successfully in 357 ms (154 modules)
Try to rewrite your _app.js file. It can help to resolve your problem.
I'm using next.js with TypeScript and Material UI.
You can use the following code and replace that.
// 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>
);
}
I saw CameronKruse's suggestion and found that showing my site in an incognito window worked, so I knew it was something browser-related. However, I tried clearing everything I possibly could: cookies, site data, local data, site permissions ... none of it helped.
Finally, I had an idea: what if, instead of running my dev server, I built and ran my production server? I tried that, and it worked ... but my devsite still didn't.
So then, I changed the port of my production server to the same port as my dev server, and sure enough (after visiting my production server, stopping it, and visiting my dev server) ... my dev server finally worked!
TLDR; build/run your production server on the same port, visit it in your browser, then stop it and run your dev server. Hope that helps others with this problem, as it helped me!