nextjs/dev-server

Run Development Server

Start the Next.js development server with hot-reloading and fast refresh.

development
server
live-reload
debug

Command

npm run dev

Explanation

The development server provided by Next.js supports fast refresh, automatic routing, and HMR (Hot Module Replacement). It compiles code on demand and reflects changes instantly without a full reload. The default port is 3000, but it can be changed with the `-p` flag or `PORT` environment variable.

Common Use Cases

  • Run local development server for debugging
  • Test Next.js features before building for production
  • Enable live updates during development

Best Practices

  • Run in a clean terminal to see real-time errors and warnings
  • Use `.env.local` for environment variables during development
  • Avoid committing `.next/` build output

Common Mistakes to Avoid

  • Using `next dev` without installing dependencies
  • Trying to access on a blocked port (3000 in use)

Troubleshooting

Problem: Port 3000 already in use

Solution: Run `npm run dev -- -p 4000` or set `PORT=4000`.

Problem: Changes not updating

Solution: Restart the dev server to reset the HMR cache.

Examples

Start the dev server on default port 3000

npm run dev

Start dev server using Yarn

yarn dev

Start dev server with pnpm

pnpm dev