Development server and hot reload in NextJS

Introduction

The development server lets you see your Next.js app live as you build it. Hot reload updates your app instantly when you change code, so you don't have to refresh the page manually.

When you want to see your website changes immediately while coding.

When you fix bugs and want to check the results right away.

When you add new features and want to test them quickly.

When you want to keep your app running without restarting it every time.

When you want faster feedback during development.

Syntax

NextJS

npm run dev
# or
npx next dev

This command starts the Next.js development server on http://localhost:3000 by default.

Hot reload works automatically; you just save your files and see changes instantly.

Examples

Starts the development server using the script defined in package.json. This is the most common way.

NextJS

npm run dev

Runs the Next.js development server directly using npx if you don't have Next.js installed globally.

NextJS

npx next dev

Sample Program

This simple page shows how hot reload works. When you change the paragraph text and save, the browser updates immediately, so you see your changes live.

NextJS

/*
Create a simple Next.js page in <project_root>/pages/index.js:
*/

export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>Edit this text and save to see hot reload in action.</p>
    </main>
  )
}

/*
Run the development server:
$ npm run dev

Open http://localhost:3000 in your browser.

Change the paragraph text and save the file.
The page updates instantly without a full reload.
*/

Important Notes

Hot reload preserves the app state, so you don't lose your place when editing.

If hot reload doesn't work, try restarting the development server.

Use the browser DevTools console to see any errors during reload.

Summary

The development server runs your Next.js app locally for live preview.

Hot reload updates your app instantly when you save code changes.

This speeds up development by showing results without manual refresh.