Step 4 — Node.js + pnpm + your first React

Node.js runs JavaScript outside the browser; a package manager pulls in libraries. Both are required for React / Next.js.

1. Install Node.js

# Windows
winget install OpenJS.NodeJS.LTS

# macOS
brew install node

# Linux (NodeSource)
curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
sudo apt install nodejs

node --version   # 24.x

Prefer LTS. As of August 2026, Node 24 is Active LTS and Node 22 is Maintenance LTS. Node 20 has reached end of life.

2. Version management — nvm / fnm

When projects need different Node versions:

# macOS / Linux
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 24
nvm use 24
nvm alias default 24

Windows: prefer fnm or nvs.

3. Three package managers

The example repository uses pnpm. Other choices are valid, but do not mix managers within one project.

4. Activate pnpm with corepack

Node 24 includes corepack, so activate the project package-manager version instead of installing pnpm globally.

corepack enable
corepack prepare pnpm@10.33.0 --activate

pnpm --version

If package.json has "packageManager": "pnpm@10.33.0", corepack uses that version automatically.

5. Core pnpm commands

pnpm install
pnpm add react
pnpm add -D typescript
pnpm remove lodash
pnpm update
pnpm run dev           # or `pnpm dev`
pnpm dlx create-next-app

pnpm i = pnpm install.

6. Reading package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
  "dependencies": { "next": "16.0.0", "react": "19.0.0" },
  "devDependencies": { "typescript": "5.6.0" },
  "packageManager": "pnpm@10.33.0"
}

• dependencies — runtime
• devDependencies — build/test only
• scripts — run with pnpm <name>

7. node_modules and lockfile

• node_modules/ — installed packages. .gitignore it; it's huge
• pnpm-lock.yaml — exact versions. Commit this

Lockfile ensures everyone installs the same versions.

8. First Next.js project

pnpm create next-app@latest my-first-app
# TypeScript? Yes
# ESLint? Yes
# Tailwind? Yes
# src/ directory? Yes
# App Router? Yes
# Turbopack? Yes
cd my-first-app
pnpm dev

Open http://localhost:3000.

9. Project layout

my-first-app/
├── src/app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── package.json
├── pnpm-lock.yaml
├── next.config.ts
└── .gitignore

Edit src/app/page.tsx; the page hot-reloads.

10. Gotchas

• Mixing package managers → both lockfiles. Pick one
• Port 3000 busy → pnpm dev -- -p 3001
• cannot find module → reinstall
• Node version drift → .nvmrc with 24

11. engines field

{
  "engines": {
    "node": ">=22",
    "pnpm": ">=10"
  }
}

Warn or fail when requirements aren't met.

Closing

Start new projects with Node 24 LTS, pnpm 10, and Next 16. Node 22 remains supported, but the latest LTS keeps a new setup straightforward.

Next

• 05-ai-tools

References: Node.js · pnpm · Next.js App Router.