Upgrade web app to Next.js 16 and React 19#1025
Conversation
Bump web from Next.js 15.5.18 to 16.2.7 and React 18.3 to 19.2. - web/package.json: next 16.2.7, react/react-dom 19.2, @types 19.2; dev/build scripts use --webpack to keep the existing markdown raw loader (SKILL.md?raw is build-time inlined and read by the force-dynamic openclaw invite route). - Root overrides: align react/react-dom/@types/react(-dom) to 19 and pin next to 16.2.7 so the monorepo dedupes to a single copy of each (web is the only React consumer; all transitive libs support 19). Drop the obsolete @posthog/next->next 15.5.18 override. - React 19 type fixes: ComponentPropsWithoutRef for HighlightedPre, typed isValidElement generics where props is now unknown, and import the JSX type (global JSX namespace removed). - Rename middleware.ts -> proxy.ts (Next 16 file convention). - sst.config.ts: openNextVersion 3.9.16 -> 3.10.4 for Next 16 support. Build, typecheck, and tests pass.
The unused @testing-library/react@14 (no imports anywhere) pinned React 18, which is what forced the broad version overrides. Remove it (keeping @testing-library/jest-dom, which vitest.setup.ts uses) so the dependency graph converges on React 19 / Next 16 on its own. Overrides shrink from 5 entries to 2: only react/react-dom remain, which are still needed to force a single React 19 copy through the messy lobehub/antd transitive graph (npm otherwise hoists a stray react-dom@18). The next and @types/react(-dom) overrides are no longer necessary. Verified single-copy resolution for next/react/react-dom/@types/react, clean build, clean typecheck, and 12/12 web tests.
With the unused @testing-library/react removed, nothing pulls React 18, so web's direct react@^19.2.0 / react-dom@^19.2.0 deps converge on a single React 19 on their own. Confirmed the react/react-dom overrides were no-ops: removing them regenerates a byte-identical lockfile, and build/typecheck/12 tests all pass. Overrides are now just flatted.
|
CodeAnt AI is reviewing your PR. |
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughAdds completed trajectory artifacts and upgrades the web package to Next.js 16 / React 19, adjusts package manifests, tightens TypeScript/JSX typings across components/tests, and updates build/config files including renaming middleware to a named ChangesPear Landing Page Build and React 19 Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
codeant-ai
Bot
added
the
size:XXL
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4e10257a36
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| "gray-matter": "^4.0.3", | ||
| "lucide-react": "^1.0.1", | ||
| "next": "15.5.18", | ||
| "next": "16.2.7", |
There was a problem hiding this comment.
This upgrade makes the web workspace depend on Next 16, whose package metadata in the updated lockfile requires node >=20.9.0, but the repo still advertises Node >=18.0.0 at the root. In environments that follow the current engine range (for example Node 18 or Node 20.0-20.8 contributors/CI/deploy images), npm install can warn/fail under engine-strict and next dev/next build will not run once the Next CLI enforces its engine guard, so the web app upgrade needs the repo/deployment Node engine bumped or the Next version kept compatible.
Useful? React with 👍 / 👎.
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| : null; | ||
|
|
||
| export default function middleware(request: NextRequest) { | ||
| export default function proxy(request: NextRequest) { |
There was a problem hiding this comment.
Suggestion: proxy.ts in Next 16 is discovered via a named proxy export, but this change makes it a default export; if the runtime only looks for the named export, the proxy hook will be skipped and your PostHog middleware will silently never run. Export proxy as a named function instead of default to match the file-convention contract. [api mismatch]
Severity Level: Critical 🚨
- ❌ Next 16 proxy hook never registered for requests.
- ❌ PostHog proxy middleware never runs despite being configured.
- ⚠️ Analytics behavior diverges from expected Next 16 setup.Steps of Reproduction ✅
1. Ensure the web app uses Next 16.2.7 with the new `proxy.ts` convention and that
`NEXT_PUBLIC_POSTHOG_KEY` is set so `postHogMiddleware` is created in `web/proxy.ts:6-10`.
2. Note that the proxy entrypoint in `web/proxy.ts:12-14` is declared as `export default
function proxy(request: NextRequest)` and that a repo-wide search (`web/**/*.ts`) shows no
other callers of `proxy(...)`, meaning it is intended to be invoked only via Next's file
convention.
3. Start the Next web app (e.g., `npm run dev` in `web/`) and issue any HTTP request
matching the middleware matcher in `web/proxy.ts:17-19` (e.g., `GET /`), which should be
intercepted by the PostHog proxy hook.
4. Observe that the request proceeds as if there is no proxy/middleware (no PostHog
behavior), because Next 16's `proxy.ts` convention expects a named `export function
proxy(...)`, and with only a default export the runtime does not register the function at
`web/proxy.ts:12`, so `postHog(request)` is never called.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** web/proxy.ts
**Line:** 12:12
**Comment:**
*Api Mismatch: `proxy.ts` in Next 16 is discovered via a named `proxy` export, but this change makes it a default export; if the runtime only looks for the named export, the proxy hook will be skipped and your PostHog middleware will silently never run. Export `proxy` as a named function instead of default to match the file-convention contract.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
|
Preview deployed!
This preview will be cleaned up when the PR is merged or closed. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 17 files
Tip: cubic can generate docs of your entire codebase and keep them up to date. Try it here.
Re-trigger cubic
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
99-99:⚠️ Potential issue | 🟠 Major | ⚡ Quick winBump
package.jsonengines.nodeto match Next.js 16.2.7’s Node requirementNext.js 16 requires Node.js >= 20.9.0 (Node 18 is no longer supported), but the repo root sets
engines.nodeto>=18.0.0. Update the rootengines.node(and ensure CI/tooling uses the same Node version) so installs/builds don’t fail depending on the active Node runtime.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@package.json` at line 99, Update the package.json engines.node entry from ">=18.0.0" to ">=20.9.0" so it matches Next.js 16.2.7’s Node requirement; modify the "engines": { "node": ... } field accordingly and ensure any CI configs, Dockerfiles, or toolchains that pin Node (e.g., GitHub Actions setup, .nvmrc, Dockerfile) are also updated to use Node >=20.9.0 to keep runtime versions consistent during installs and builds.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/sst.config.ts`:
- Line 20: The config pins openNextVersion: '3.10.4' in sst.config.ts but no
preview deploy was done; run a non-production SST preview deploy using the repo
runner (e.g., npx sst deploy --stage pr-open-next-compat) to validate OpenNext
3.10.4 against the repo's Next (web/package.json) and SST versions, then confirm
the deployed Web stage URL returns HTTP 200; if it fails, revert or adjust
openNextVersion in sst.config.ts and re-run the same preview until the smoke
test succeeds.
---
Outside diff comments:
In `@package.json`:
- Line 99: Update the package.json engines.node entry from ">=18.0.0" to
">=20.9.0" so it matches Next.js 16.2.7’s Node requirement; modify the
"engines": { "node": ... } field accordingly and ensure any CI configs,
Dockerfiles, or toolchains that pin Node (e.g., GitHub Actions setup, .nvmrc,
Dockerfile) are also updated to use Node >=20.9.0 to keep runtime versions
consistent during installs and builds.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 733f62c6-0788-4db3-927a-d4ebe5a75d29
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
.agentworkforce/trajectories/active/traj_flyb4fe5j3tl/trajectory.json.agentworkforce/trajectories/completed/2026-06/traj_flyb4fe5j3tl.trace.json.agentworkforce/trajectories/completed/2026-06/traj_flyb4fe5j3tl/summary.md.agentworkforce/trajectories/completed/2026-06/traj_flyb4fe5j3tl/trajectory.jsonpackage.jsonweb/app/file/RelayfileAnimation.tsxweb/components/MessageRelayAnimation.tsxweb/components/NodeRelayAnimation.tsxweb/components/docs/CodeGroup.tsxweb/components/docs/HighlightedCode.tsxweb/lib/test/highlighted-code.test.tsxweb/next-env.d.tsweb/package.jsonweb/proxy.tsweb/sst.config.tsweb/tsconfig.json
💤 Files with no reviewable changes (1)
- .agentworkforce/trajectories/active/traj_flyb4fe5j3tl/trajectory.json
| const web = new sst.aws.Nextjs('Web', { | ||
| path: '.', | ||
| openNextVersion: '3.9.16', | ||
| openNextVersion: '3.10.4', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Confirm declared versions in repo
echo "== Version declarations =="
node -e "const fs=require('fs');const p=JSON.parse(fs.readFileSync('web/package.json','utf8'));console.log('next:',p.dependencies?.next);console.log('react:',p.dependencies?.react);"
node -e "const fs=require('fs');const p=JSON.parse(fs.readFileSync('package.json','utf8'));console.log('sst:',p.devDependencies?.sst || p.dependencies?.sst || 'not-found');"
# 2) Show the exact OpenNext pin in this file
echo "== openNextVersion pin =="
rg -n "openNextVersion|sst\\.aws\\.Nextjs" web/sst.config.ts -C2
# 3) Manual gate (run in CI or locally with AWS creds):
# - execute a preview synth/deploy for a non-production stage
# - verify successful build + deployment + app health URL
echo "Run: sst deploy --stage pr-open-next-compat"
echo "Expect: deploy succeeds and web URL returns 200."Repository: AgentWorkforce/relay
Length of output: 500
🏁 Script executed:
sst deploy --stage pr-open-next-compat
# Verify the printed Web stage URL responds with HTTP 200 (and the app loads).Repository: AgentWorkforce/relay
Length of output: 108
Validate OpenNext 3.10.4 compatibility via a preview SST deploy before merge
web/sst.config.ts pins openNextVersion: '3.10.4' (line 20) while web/package.json uses Next 16.2.7 and SST ^4.5.1; since no SST preview deploy/smoke test was run, add a non-prod preview deploy and confirm the deployed Web stage URL returns HTTP 200. (In this repo the sst binary may not be on PATH—use the repo’s package runner, e.g., npx sst deploy --stage pr-open-next-compat, matching how SST is invoked in package scripts.)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/sst.config.ts` at line 20, The config pins openNextVersion: '3.10.4' in
sst.config.ts but no preview deploy was done; run a non-production SST preview
deploy using the repo runner (e.g., npx sst deploy --stage pr-open-next-compat)
to validate OpenNext 3.10.4 against the repo's Next (web/package.json) and SST
versions, then confirm the deployed Web stage URL returns HTTP 200; if it fails,
revert or adjust openNextVersion in sst.config.ts and re-run the same preview
until the smoke test succeeds.
- Declare Node >=20.9.0 (Next 16 requirement) on the web workspace and
bump the root engines.node from >=18 to >=20.9.0. packages/cli keeps its
own engines (>=18), so the published CLI's Node 18 support is unchanged;
the root now accurately reflects that building the monorepo (incl. web)
needs Node 20.9+.
- proxy.ts: use the named `export function proxy` (canonical Next 16 form).
Default export also registers identically (verified: build emits the same
"ƒ Proxy (Middleware)" and proxy runs on the Node runtime), but named is
the idiomatic convention form.
- Fix stale trajectory title ("Build Pear landing page...") to match its
actual content (the Next.js 16 upgrade).
2 participants
User description
Summary
Upgrades the
web/app from Next.js 15.5.18 → 16.2.7 and React 18.3 → 19.2, and cleans up the monorepo dependency overrides that the old React 18 pin required.Changes
Core upgrade (
web/package.json)next→ 16.2.7,react/react-dom→ 19.2,@types/react(-dom)→ 19.2.dev/buildscripts use--webpack. The only webpack-specific code is theSKILL.md?rawimport (build-time inlined, read at runtime by theforce-dynamicopenclaw invite route). Turbopack doesn't support the?rawresourceQuery loader, and OpenNext runsnpm run build, so the flag is honored in dev, CI, and production. Turbopack adoption can be a follow-up.React 19 type fixes
HighlightedPre→ComponentPropsWithoutRef<'pre'>(the oldDetailedHTMLPropsrefwas incompatible with React 19's tightenedreftype).isValidElement<…>generics inCodeGroup.tsx,HighlightedCode.tsx, and a test (React 19 makes elementpropsunknown).JSXtype in three animation files (React 19 removed the globalJSXnamespace).Next 16 conventions
web/middleware.ts→web/proxy.ts(Next 16 file convention; clears the deprecation warning).tsconfig.json/next-env.d.tsauto-updated by Next 16 (jsx: react-jsx, routes type import).Dependency / overrides cleanup (root
package.json)@testing-library/react@14devDep (no imports anywhere; v14 pinned React 18, which was the sole reason the broad overrides existed). Kept@testing-library/jest-dom, whichvitest.setup.tsuses.react@^19.2.0/react-dom@^19.2.0deps converge on a single React 19 on their own. Confirmed thereact/react-dom/next/@types/react(-dom)overrides were no-ops — removing them regenerates a byte-identical lockfile. Theoverridesblock is now justflatted.Deploy (
web/sst.config.ts)openNextVersion3.9.16 → 3.10.4 (stays in the OpenNext 3.x line SST 4.5.1 targets; adds Next 16 support).Verification
next build(webpack): clean, 167 static pages, no warnings.tsc --noEmit: clean.vitest run: 12/12 passing.next,react,react-dom,@types/react(-dom)— 0 invalid entries.Notes
openNextVersionbump should be validated with a real SST deploy/preview (couldn't run AWS deploys here).CHANGELOG.mdentry per the repo rule (web-only changes are excluded from the changelog).https://claude.ai/code/session_01D1gr9E2XoxEBCvvY9pfwLr
Generated by Claude Code
CodeAnt-AI Description
Add a new Pear landing page and move the web app to Next.js 16 and React 19
What Changed
/pearlanding page with its own layout, styles, and image assetsImpact
✅ New Pear landing page✅ Next.js 16 compatibility✅ React 19 compatibility💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.