Next dev启动成功但浏览器持续加载问题求助

Problem Details #

Running yarn dev in VS Code terminal shows the server starts and compiles without errors:

$ 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)

Code changes trigger successful recompilation, but accessing localhost:3000 results in infinite browser loading. yarn build and yarn start work normally.

Dependencies #

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

Troubleshooting Already Attempted #

• Restarted browser and computer
• Reinstalled all dependencies
• Downgraded Next.js from 13.1.5 to 12.3.0
• Deleted .next folder multiple times

Possible Fixes #

1. Check server-side code for unresolved promises/infinite loops
   Since production build works but dev mode hangs, focus on code paths that run exclusively in dev:

   • Audit getServerSideProps/getStaticProps (Pages Router) or Server Components/Route Handlers (App Router) for unresolvable promises
   • Verify Mongoose connection details in .env.local—dev mode might fail to connect to the database while production handles it gracefully

2. Rule out browser extension interference
   Extensions like ad blockers, VPNs, or React DevTools can block dev server requests. Test the site in incognito mode, or disable extensions one by one to identify conflicts.

3. Verify port availability
   Even if the server claims to use port 3000, another process might be occupying it. Run:

   • Windows: netstat -ano | findstr :3000 to find the process ID, then kill it via Task Manager
   • macOS/Linux: lsof -i :3000 then kill -9 <PID>

4. Inspect browser dev tools
   Open Chrome DevTools (F12):

   • Check the Network tab for stuck/pending requests (especially the initial HTML load)
   • Look for JavaScript errors in the Console tab that might block rendering

5. Tweak Next.js dev server settings
   Add these to next.config.js to disable potentially problematic dev features:

   module.exports = {
     devIndicators: { buildActivity: false },
     reactStrictMode: false // Temporarily disable to rule out double-render issues
   }
   

   Re-enable reactStrictMode once you pinpoint the issue.

6. Move project out of OneDrive
   OneDrive's file sync can cause permission delays or file lock issues in dev mode. Move the project folder to a local directory (e.g., C:\Users\Jesti\Desktop\projects) and retry yarn dev.

内容的提问来源于stack exchange，提问作者VallenDra