@@ -26,9 +26,36 @@ The section below contains the step-by-step upgrade workflow. Load the knowledge
2626
2727## PHASE 1: Pre-Flight Checks (REQUIRED)
2828────────────────────────────────────────
29- Check these BEFORE upgrading:
29+ Check these BEFORE running the codemod:
30+
31+ 0 . ** Detect Monorepo Structure (CRITICAL)**
32+ ⚠️ ** If this is a monorepo, you MUST run the upgrade flow on each individual app, NOT at the monorepo root**
33+
34+ Check for monorepo indicators:
35+ - Workspace configuration: ` workspaces ` field in root package.json
36+ - Monorepo tools: pnpm-workspace.yaml, lerna.json, nx.json, turbo.json
37+ - Multiple app directories: apps/, packages/, services/ folders
38+
39+ ** If monorepo detected:**
40+ ``` bash
41+ # Find all Next.js apps in the monorepo
42+ find . -name " package.json" -not -path " */node_modules/*" -exec grep -l " \" next\" :" {} \;
43+ ```
44+
45+ ** For each Next.js app found:**
46+ - Navigate to that app's directory: ` cd apps/web ` (or wherever the app is)
47+ - Run the ENTIRE upgrade workflow from that directory
48+ - The codemod will fail if run from monorepo root
49+
50+ Example for typical monorepo structure:
51+ ``` bash
52+ # If you have: apps/web, apps/admin, apps/marketing
53+ cd apps/web && [run upgrade workflow here]
54+ cd ../admin && [run upgrade workflow here]
55+ cd ../marketing && [run upgrade workflow here]
56+ ```
3057
31- 0 . ** Detect Package Manager**
58+ 1 . ** Detect Package Manager**
3259 Check: package.json "packageManager" field or lock files
3360
3461 ** Template Variables:**
@@ -41,46 +68,63 @@ Check these BEFORE upgrading:
4168
4269 Use these template variables in ALL commands below for consistency
4370
44- 1 . ** Node.js Version**
71+ 2 . ** Node.js Version**
4572 Required: Node.js 20+
4673 Check: node --version
4774 Action: Upgrade if < 20
4875
49- 2 . ** TypeScript Version**
76+ 3 . ** TypeScript Version**
5077 Required: TypeScript 5.0+
5178 Check: package.json → devDependencies.typescript
52- Action: If exists and < 5.0, upgrade with detected package manager
53-
54- 3 . ** React and Type Definitions**
55- Action: Upgrade React and type definitions using the detected package manager:
56- ``` bash
57- < pkg-manager> add react@latest react-dom@latest
58- < pkg-manager> add -D @types/react@latest @types/react-dom@latest
59- ```
79+ Note: Document if upgrade needed (codemod won't upgrade this)
80+ Action: If < 5.0, plan to upgrade after codemod
6081
61824 . ** Current Next.js Version**
6283 Check: package.json → dependencies.next
6384 Note: Document current version for rollback
6485
86+ 5 . ** Git Status**
87+ Check: git status
88+ Action: Ensure working directory is clean (no uncommitted changes)
89+ Why: The codemod requires a clean git state to run
90+
6591## PHASE 2: Run Automated Codemod
6692────────────────────────────────────────
67- Run the official codemod first to handle most changes automatically:
93+ ⚠️ ** IMPORTANT: Run this BEFORE making any manual changes**
94+
95+ The codemod requires a clean git working directory. It will fail with this error if you have uncommitted changes:
96+ > But before we continue, please stash or commit your git changes
97+
98+ Run the official codemod to handle most changes automatically:
6899
69100``` bash
70101# This will:
71102# - Upgrade Next.js, React, and React DOM to latest versions
103+ # - Upgrade @types/react and @types/react-dom to latest
72104# - Convert async params/searchParams automatically
73105# - Update experimental config locations
74106# - Fix other breaking changes
75107< pkg-exec> @next/codemod@canary upgrade beta
76108```
77109
78110** What the codemod handles:**
111+ - ✅ Upgrades Next.js, React, and React DOM to latest versions
112+ - ✅ Upgrades React type definitions to latest
79113- ✅ Converts sync params/searchParams to async (most cases)
80114- ✅ Updates experimental config locations
81115- ✅ Fixes metadata generation functions
82116- ✅ Updates deprecated imports
83117
118+ ** What the codemod does NOT handle:**
119+ - ❌ TypeScript version upgrade (do this manually if needed)
120+
121+ ** After codemod completes:**
122+ 1 . Review the git diff to see what changed
123+ 2 . If TypeScript < 5.0, upgrade it now:
124+ ``` bash
125+ < pkg-manager> add -D typescript@latest
126+ ```
127+
84128** Wait for codemod to complete before proceeding to Phase 3**
85129
86130{{IF_REQUIRES_CANARY}}
@@ -352,22 +396,28 @@ Report findings in this format:
352396- Current Version: [version]
353397- Target Version: 16
354398- Package Manager: [npm/pnpm/yarn/bun]
399+ - Monorepo: [Yes/No]
400+ - If Monorepo, Apps to Upgrade: [list of app directories]
355401
356402## Phase 1: Pre-Flight Checks
403+ [ ] Monorepo structure detected (if applicable, list all Next.js apps)
404+ [ ] Working directory: [current app directory path]
357405[ ] Node.js version (20+)
358- [ ] TypeScript version (5.0+)
359- [ ] React dependencies upgraded to @latest (even if on v19)
360- [ ] React type definitions upgraded to @latest
406+ [ ] TypeScript version checked (5.0+)
361407[ ] Current Next.js version documented
408+ [ ] Git working directory is clean (no uncommitted changes)
362409
363410## Phase 2: Codemod Execution
364411- [ ] Ran codemod: `<pkg-exec> @next/codemod@canary upgrade beta`
412+ - [ ] Codemod upgraded Next.js, React, and React DOM to latest
413+ - [ ] Codemod upgraded React type definitions to latest
414+ - [ ] Codemod applied automatic fixes
365415{{IF_REQUIRES_CANARY}}
366- - [ ] Upgraded to canary: `<pkg-manager> add next@canary`
367- - [ ] Upgraded eslint-config-next: `<pkg-manager> add -D eslint-config-next@canary`
416+ - [ ] (Optional) Upgraded to canary: `<pkg-manager> add next@canary`
417+ - [ ] (Optional) Upgraded eslint-config-next: `<pkg-manager> add -D eslint-config-next@canary`
368418{{/IF_REQUIRES_CANARY}}
369- - [ ] Dependencies upgraded
370- - [ ] Automatic fixes applied
419+ - [ ] TypeScript upgraded if needed: `<pkg-manager> add -D typescript@latest`
420+ - [ ] Reviewed git diff for codemod changes
371421
372422## Phase 3: Issues Requiring Manual Fixes
373423Issues the codemod couldn't handle:
@@ -400,6 +450,9 @@ Issues the codemod couldn't handle:
400450
401451# START HERE
402452Begin migration:
403- 1 . Start with Phase 1 pre-flight checks
404- 2 . Run the codemod in Phase 2 (this handles most changes automatically)
405- 3 . Only after codemod completes, analyze and fix remaining issues
453+ 1 . ** FIRST: Check if this is a monorepo** - If yes, navigate to each Next.js app directory and run the workflow there (NOT at monorepo root)
454+ 2 . Start with Phase 1 pre-flight checks (ensure clean git state)
455+ 3 . Run the codemod in Phase 2 (this handles most changes automatically)
456+ 4 . Only after codemod completes, analyze and fix remaining issues
457+
458+ ** ⚠️ MONOREPO USERS:** If you're in a monorepo, you MUST be in the specific Next.js app directory (e.g., ` apps/web/ ` ) before starting. The codemod will fail if run from the monorepo root.
0 commit comments