In this lab, you'll learn everything about running your Next.js development server, understanding hot reloading, and using the dev environment efficiently. These are skills you'll use every single day as a Next.js developer.
Navigate into your Next.js project folder and run:
cd my-nextjs-app
npm run dev▲ Next.js 14.1.0
- Local: http://localhost:3000
- Environments: .env.local
✓ Starting...
✓ Ready in 1532msNow open your browser at http://localhost:3000
You're now running a local development server — it's only accessible on your machine.
Hot Reloading (also called Fast Refresh in Next.js) is one of the most productive features for developers. It means:
When you save a file, the browser automatically updates — without a full page reload — and without losing your app's state.
![Hot Reloading Demo] - i will add the image here
app/page.tsx// app/page.tsx (default content)
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>Hello World</h1>
</main>
);
}Change "Hello World" to anything:
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>🚀 I changed this and it updated instantly!</h1>
<p>Hot reloading is amazing!</p>
</main>
);
}The browser updates immediately without you doing anything. That's Fast Refresh at work!
When you run npm run dev, the terminal shows useful information:
▲ Next.js 14.1.0
- Local: http://localhost:3000 ← Your app URL
- Network: http://192.168.1.5:3000 ← Access from other devices on same WiFi
✓ Ready in 1532ms
○ Compiling / ... ← Compiling the route being visited
✓ Compiled / in 1.5s (512 modules) ← Successfully compiled
GET / 200 in 1521ms ← HTTP request log| Symbol | Meaning |
|---|---|
○ | Static page (pre-rendered) |
λ | Dynamic page (server-rendered) |
● | ISR page (regenerated periodically) |
Want to test your app on your phone while developing?
# Start server accessible on your local network
npm run dev -- --hostname 0.0.0.0Then on your phone (connected to same WiFi), visit the Network URL shown in the terminal:
http://192.168.1.5:3000
By default, the dev server runs on port 3000. If that port is busy, you can change it:
# Run on a different port
npm run dev -- --port 4000
# or
npm run dev -p 4000Or set it permanently in package.json:
"scripts": {
"dev": "next dev --port 4000"
}Next.js 14+ includes Turbopack, a Rust-based bundler that makes the dev server significantly faster:
# Enable Turbopack (if not already set up)
npm run dev --turboOr in package.json:
"scripts": {
"dev": "next dev --turbo"
}| Metric | Webpack | Turbopack |
|---|---|---|
| Cold start | ~5-10s | ~1-2s |
| Hot reload | ~500ms | ~50ms |
| Large project start | 30s+ | 3-5s |
🚀 Turbopack is up to 10x faster than Webpack for large projects!
Next.js Fast Refresh handles three types of changes differently:
If you only edit the JSX/rendering logic — Fast Refresh updates only that component, preserving all state.
// Edit the text → only the text updates, form state preserved
<h1>Changed title</h1>If you edit a custom hook or utility that a component uses — that component fully remounts.
If you edit next.config.mjs or server-side files — the entire page reloads (full refresh).
Press Ctrl + C in the terminal to stop the server.
^C ← Ctrl+C stops the server# Find what's using port 3000
# Mac/Linux:
lsof -i :3000
# Windows:
netstat -ano | findstr :3000
# Kill the process (Mac/Linux):
kill -9 <PID>
# Or just use a different port:
npm run dev -p 3001# Fix: reinstall dependencies
rm -rf node_modules
npm install
npm run dev# Fix: install Next.js
npm install next react react-dom| Feature | Dev Server (npm run dev) | Production (npm run build && start) |
|---|---|---|
| Speed | Slower (compiles on demand) | Fast (pre-compiled) |
| Hot Reload | ✅ Yes | ❌ No |
| Error Messages | Detailed, with source maps | Minified |
| Bundle Size | Large (unoptimized) | Small (optimized) |
| Use Case | Building & testing | Deployed app |
Always test your app with
npm run build && npm run startbefore deploying — dev mode hides some production issues.
.next/ Folder During DevelopmentEvery time you make a change, Next.js recompiles only the affected modules and stores them in .next/cache/. This is why subsequent loads are faster than the first!
.next/
├── cache/
│ └── webpack/ ← Cached compilations for fast rebuilds
├── server/
│ └── app/ ← Server-rendered page output
└── static/
└── chunks/ ← JS chunks for the browser
Try all of these while your dev server is running:
app/page.tsx — change the text, watch it update instantly ✓app/globals.css — change a color or font, watch it update ✓app/about/page.tsx — visit /about in the browser ✓// app/about/page.tsx — create this file!
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This page was created during the hot reloading lab! 🎉</p>
</div>
);
}After saving, visit http://localhost:3000/about — it works automatically!
Fireship's Next.js in 100 Seconds + dev server walkthrough — best quick overview of the dev experience.
npm run devhttp://localhost:3000 in browserpage.tsx and saw instant hot reloadapp/about/page.tsx