The App Router: page.js and layout.js

Run the dev server and learn the two special files that define every Next.js route: page.js for a route's UI and layout.js for shared structure.

Step 1 of 3

Start the development server

Time to see your app live. In the terminal, inside your project folder, run npm run dev. This starts the development server — a local web server (powered by Node) that compiles your code on the fly and serves it at http://localhost:3000.

Open that address in your browser and you'll see your home page. Now change the text in app/page.js, save, and watch the browser update instantly without a refresh. That live updating is called Fast Refresh, and it's one of the biggest reasons developers love Next.js.

Tip — leave it running

Keep the dev server running in its terminal while you work. To stop it, press Ctrl + C in that terminal. To start again, run npm run dev. If port 3000 is busy, Next.js will offer the next free port (like 3001).

TYPESCRIPTREAD ONLY