> **react-sync** — skill 23 of 24 in [vercel/next.js](https://skillsdocs.com/vercel/next.js).
>
> Book (all skills, one file): https://skillsdocs.com/vercel/next.js.md
> Machine manifest: https://skillsdocs.com/vercel/next.js/.well-known/agent-skills/index.json
> Origin: credited — this skill is installed into this repository and in use here, not published from it, so there is no install command.
> Upstream: https://github.com/vercel/next.js/blob/canary/.agents/skills/react-sync/SKILL.md @ `canary`
> Raw bytes, no header: https://raw.githubusercontent.com/vercel/next.js/canary/.agents/skills/react-sync/SKILL.md
> Base for relative paths: https://raw.githubusercontent.com/vercel/next.js/canary/.agents/skills/react-sync/
> Licence: MIT — https://spdx.org/licenses/MIT.html
>
> Bundled files (1), referenced from this skill's directory:
>   - `scripts/build-for-next.sh` — https://raw.githubusercontent.com/vercel/next.js/canary/.agents/skills/react-sync/scripts/build-for-next.sh
>
> Content © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: react-sync
description: >
  Build local React changes in the bundle variants consumed by Next.js, sync
  them into a local Next.js checkout, and test the resulting integration. Use
  when working on React changes that need validation in Next.js, or when asked
  to run buildForNext, pnpm sync-react, or synchronize a React checkout with
  Next.js.
metadata:
  internal: true
---

# Sync React to Next.js

Use this skill when syncing a local React checkout into this Next.js checkout.

## Build and sync

1. Build React from its own checkout. Pass this skill's script by its absolute
   path, because the working directory must be the React repository.

   ```bash
   cd <react-repo>
   bash <next-repo>/.agents/skills/react-sync/scripts/build-for-next.sh
   ```

   This creates `build/oss-stable` and `build/oss-experimental` with the
   bundle variants that Next.js consumes.

2. Sync the build into Next.js:

   ```bash
   cd <next-repo>
   PATH="$(dirname "$(command -v corepack)"):$PATH" \
     pnpm sync-react --version <react-repo>
   ```

   Work around a Codex `PATH`-precedence bug by keeping the directory containing
   the active Corepack shim first on `PATH`. Codex injects a separate bundled
   `pnpm` executable ahead of the user's Corepack shim, and command lookup
   happens before Corepack reads the repository's `packageManager` field. The
   prefix makes both this command and `sync-react`'s nested `pnpm install`
   resolve through Corepack to the repository-pinned pnpm version. Invoking
   only the outer command with `corepack pnpm` is insufficient because the
   nested command still resolves `pnpm` from `PATH`.

3. Inspect the sync result before testing. Preserve unrelated changes in both
   checkouts. Rebuild Next.js when required, then run the focused test command
   matching the changed behavior.

## Related Skills

- `$react-vendoring` - vendored React runtime and type boundaries after syncing.