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_20.x | sudo -E bash -
sudo apt install nodejs

node --version   # 20.x or newer

Prefer LTS. As of 2026, Node 20 and 22 are LTS.

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 20
nvm use 20
nvm alias default 20

Windows: prefer fnm or nvs.

3. Three package managers

Name	Pros	Cons
npm	Ships with Node, ubiquitous	Slow, heavy node_modules
yarn	Fast, monorepo-friendly	v1 ↔ v2+ behave differently
pnpm	Fastest, disk-efficient, strict	Slight learning curve

warragon uses pnpm. Don't mix managers within a project.

4. Activate pnpm with corepack

Node 16.13+ ships corepack, no separate install needed.

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 20

11. engines field

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

Warn or fail when requirements aren't met.

Closing

Node 20 + pnpm + Next 16 is the 2026 default. Once set up, every new project starts from the same recipe.

Next

• 05-ai-tools

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