Next dev successfully runs, but keeps loading on browser

Question

Running yarn dev always runs successfully as shown in my vs code terminal:

$ yarn dev
yarn run v1.22.19
warning ..\..\..\..\package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\Jesti\OneDrive\Desktop\projects\vallendra-portfolio\.env.local
event - compiled client and server successfully in 5.1s (540 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 1963 ms (548 modules)
wait  - compiling...
event - compiled client and server successfully in 1913 ms (540 modules)

it even recompiles successfully whenever there is a code change, but somehow when i try to access localhost:3000 , the browser always stays in this endless loading state.

here is my dependencies list:

"dependencies": {
    "@giscus/react": "^2.2.6",
    "@material-tailwind/react": "^1.2.5",
    "@vercel/og": "^0.0.27",
    "mongoose": "^6.8.4",
    "next": "^13.1.5",
    "next-cloudinary": "^1.11.0",
    "next-themes": "^0.2.1",
    "nextjs-progressbar": "^0.0.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "swr": "^2.0.1"
  },
  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.2",
    "@types/node": "18.11.18",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "prettier": "^2.8.3",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "tailwind-scrollbar": "^2.0.1",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.6.4"
  }

I tried restarting my browser and PC.

I tried reinstalling all my dependencies and even tried to downgrade to next 12.3.0 , since i used next 13.1.5 in my package.json .

I tried deleting the.next folder multiple times. none of those worked.

yarn build and yarn start seems fine though. Any help regarding this problem would be much appreciated, thank you.

Answer 1

Turns out the problem wasn't about the dependencies, some random next.js error, or the browser.

It was my code regarding mongoose/mongodb. In one of my server side.ts file at a certain part of the code that included a query to mongodb, I forgot to make the connection to the database and so the server sort of just hangs (this is just my speculation).

After I added the code for checking the connection at that part, the dev server runs normally again.

If you've tried the solutions given by others and still doesn't work. There is probably something in your code that you've done recently that blocks the server thread.

That was my problem, it's probably yours too.

Answer 2

Try using npm and use the following npm command

npm run dev