When I edit a file, my Next.js app doesn't acknowledge changes and doesn't refresh

Question

I started my project and so far so good.

npm run start                                        

> mk-market@0.1.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/...../market/.env.local
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

But after this there is no more console output, it outputs server side console.logs() when no request is made and changes are not saved in my file.

The page is running in my browser (located at localhost:3000). But when I save the changes (assuming adding <h1>Hello</h1>), I don't get an automatic recompile. And npm run start doesn't make any changes either. The only way to get the newly saved changes is to run npm run build followed by ​​npm run start

This has happened to me in the past and the only way I could get it to work again was to start a completely new project. But now I've gone a little too far.

I googled like crazy but the only thing I could find that was closely related was capital letters in the page naming in the application folder, but that's not the case here.

Also, I just created a brand new project using npm create-next-app but the same thing is happening. When running npm run start I get:

Error: Could not find a production build in the '/Users/erikingman/MK/mk-test/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at NextNodeServer.getBuildId (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/next-server.js:352:23)
    at new Server (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/base-server.js:146:29)
    at new NextNodeServer (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/next-server.js:166:9)
    at NextServer.createServer (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/next.js:167:24)
    at async /Users/erikingman/MK/mk-test/node_modules/next/dist/server/next.js:187:31
    at async NextServer.prepare (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/next.js:149:24)
    at async Server.<anonymous> (/Users/erikingman/MK/mk-test/node_modules/next/dist/server/lib/render-server.js:109:17) {
    type: 'Error'
}

I had to run npm run build to run it, I don't remember doing this for new projects in the past.

Answer 1

Here is a simple solution that worked for me.

Check the version of Node JS in the command prompt, enter node -p "process.arch" If you are using 32-bit, you need to upgrade to 64-bit and install the new Node JS, Then restart your PC and you're good to go.

Answer 2

You are not using the correct development mode commands. This is npm run dev instead of npm run start. Started for deployment, it takes effect after npm runs build.

This is what you should see in the scripts section of package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},