Next.js app will not auto refresh to show changes in the browser even though im running npm run dev

Question

I want to see any updates i make to my code reflected in the browser. In VSC terminal I run "npm run dev". If i make changes to the code nothing happens unless i CTRL + C and run "npm run dev" again.

I have tried running it in Chrome (instead of Brave)

I have tried:

npm run build
npm start
Copy

I have tried:

"scripts": {
    "test": "jest",
    "dev": " next dev -p 8000",
    "build": "next build",
    "start": "next start",
  }
Copy

I have tried:

"scripts": {
    "test": "jest",
    "dev": " next dev -p 8888",
    "build": "next build",
    "start": "next start",
  }
Copy

im wondering if it has to do with the way ive organized my project

below is my project's directory organization:

v components
 v web3
  Connected.js
  NotConncted.js
  Web3Button.js
 DashboardSidebar.js
>node_modules
>pages
 >api
 _app.js
 index.js
...etc

Copy