Starting a Project and the Development Server

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Check your development environment
Create a project with create-next-app
Run the development server

When you're learning a framework, hitting errors during setup itself is discouraging. If you check your Node.js version first and understand what each command actually does, troubleshooting gets a lot easier. Per the current Next.js documentation, you need Node.js 20.9 or higher.

The key idea

create-next-app is the official scaffolding tool that sets you up with TypeScript, ESLint, Tailwind CSS, App Router, and import aliases right out of the box. Using --yes creates the project right away with the recommended defaults. If you don't have pnpm, you can use npm create next-app@latest instead. The development server watches for source changes and instantly reloads them in the browser.

Let's try it together

bash

node --version
pnpm create next-app@latest myanmar-notes --yes
cd myanmar-notes
pnpm dev

How the code works

node --version checks whether the runtime is present. After creating the project, cd into the folder and run pnpm dev. Once the Local URL shows up in the terminal, open it in your browser. To stop the server, press Ctrl+C.

You should see

The terminal shows Local: http://localhost:3000, and you can see the starter page in your browser.

5-Minute Try-It

Create the project, then change the heading in app/page.tsx to "Myanmar Notes." Watch it update in the browser without a reload.

Next.js — Installation — Next.js

Easy traps

Installing with an outdated version of Node.js
Running pnpm dev outside the project folder

Exercise

Create the project, then change the heading in app/page.tsx to "Myanmar Notes." Watch it update in the browser without a reload.

You'll know it worked when: The terminal shows Local: http://localhost:3000, and you can see the starter page in your browser.