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

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

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.

05-ai-tools

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