Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 18 additions & 14 deletions .agents/skills/migrate-to-vinext/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ description: Migrates Next.js projects to vinext (Vite-based Next.js reimplement

vinext reimplements the Next.js API surface on Vite. Existing `app/`, `pages/`, and `next.config.js` work as-is — migration is a package swap, config generation, and ESM conversion. No changes to application code required.

For user projects, prefer plain Vite 8. vinext still supports Vite 7 for older setups, but new migrations should assume Vite 8 unless you are unblocking a specific compatibility issue.

## FIRST: Verify Next.js Project

Confirm `next` is in `dependencies` or `devDependencies` in `package.json`. If not found, STOP — this skill does not apply.
Expand Down Expand Up @@ -44,7 +46,7 @@ See [references/compatibility.md](references/compatibility.md) for supported/uns
Run `vinext init`. This command:

1. Runs `vinext check` for a compatibility report
2. Installs `vite` as a devDependency (and `@vitejs/plugin-rsc` for App Router)
2. Installs `vite`, `@vitejs/plugin-react`, and App Router-only deps (`@vitejs/plugin-rsc`, `react-server-dom-webpack`) as devDependencies
3. Adds `"type": "module"` to package.json
4. Renames CJS config files (e.g., `postcss.config.js` → `.cjs`) to avoid ESM conflicts
5. Adds `dev:vinext` and `build:vinext` scripts to package.json
Expand All @@ -58,29 +60,30 @@ If `vinext init` succeeds, skip to Phase 4 (Verify). If it fails or the user pre

Use this as a fallback when `vinext init` doesn't work or the user wants full control.

### 3a. Replace packages
### 3a. Add vinext + Vite 8 dependencies

```bash
# Example with npm:
npm uninstall next
npm install vinext
npm install -D vite
npm install -D vite@^8 @vitejs/plugin-react
# App Router only:
npm install -D @vitejs/plugin-rsc
npm install -D @vitejs/plugin-rsc react-server-dom-webpack
```

### 3b. Update scripts
Keep `next` installed until you've validated the vinext path. This mirrors `vinext init`, which adds vinext scripts without overwriting the existing Next.js ones.

### 3b. Add or update scripts

Replace all `next` commands in `package.json` scripts:
Mirror `vinext init`: add parallel vinext scripts first so you can validate the vinext path without losing the existing Next.js commands:

| Before | After | Notes |
| ------------ | -------------- | -------------------------- |
| `next dev` | `vinext dev` | Dev server with HMR |
| `next build` | `vinext build` | Production build |
| `next start` | `vinext start` | Local production server |
| `next lint` | `vinext lint` | Delegates to eslint/oxlint |
| Script | Command | Notes |
| -------------- | ---------------------- | ------------------------------------- |
| `dev:vinext` | `vite dev --port 3001` | Dev server with HMR |
| `build:vinext` | `vite build` | Production build |
| `start:vinext` | `vinext start` | Local production server for built app |
| `lint:vinext` | `vinext lint` | Delegates to eslint/oxlint |

Preserve flags: `next dev --port 3001` → `vinext dev --port 3001`.
Once the vinext path is working, you can decide whether to swap your default `dev` / `build` scripts over.

### 3c. Convert to ESM

Expand Down Expand Up @@ -176,6 +179,7 @@ Nitro auto-detects the platform in most CI/CD environments, so the preset is oft
## Phase 5: Verify

1. Run `vinext dev` to start the development server
Or `npm run dev:vinext` if you added parallel scripts.
2. Confirm the server starts without errors
3. Navigate key routes and check functionality
4. Report the result to the user — if errors occur, share full output
Expand Down
2 changes: 2 additions & 0 deletions .agents/skills/migrate-to-vinext/references/compatibility.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Compatibility Reference

These notes assume a Vite 8 migration path for new projects. vinext still keeps Vite 7 compatibility, but Vite 8 is the preferred baseline.

## Supported next/\* Imports

All of these resolve automatically to vinext shims. Do not rewrite imports in application code.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vite Config Examples

These examples stay minimal on purpose. If you add custom build tuning on Vite 8, prefer `oxc`, `optimizeDeps.rolldownOptions`, and `build.rolldownOptions` / `worker.rolldownOptions` over older `esbuild` and `build.rollupOptions` settings.
These examples stay minimal on purpose. New migrations should target Vite 8. If you add custom build tuning on Vite 8, prefer `oxc`, `optimizeDeps.rolldownOptions`, and `build.rolldownOptions` / `worker.rolldownOptions` over older `esbuild` and `build.rollupOptions` settings.

## Pages Router — Local Development

Expand Down Expand Up @@ -192,8 +192,13 @@ Nitro auto-detects the platform in most CI/CD environments, so the `NITRO_PRESET

| Flag | Description |
| -------------------- | ---------------------------------------- |
| `--env <name>` | Deploy using `wrangler.jsonc` `env.name` |
| `--preview` | Deploy to preview environment |
| `--name <name>` | Override worker name |
| `--skip-build` | Skip build step (deploy existing output) |
| `--dry-run` | Generate config without deploying |
| `--prerender-all` | Pre-render discovered routes after build |
| `--experimental-tpr` | Enable Traffic-aware Pre-Rendering |
| `--tpr-coverage` | Set TPR traffic coverage target |
| `--tpr-limit` | Cap the number of TPR pages |
| `--tpr-window` | Set the TPR analytics lookback window |
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
| `ERR_REQUIRE_ESM` or `require() of ES Module` | Project missing `"type": "module"` | Add `"type": "module"` to package.json |
| `module.exports` syntax error in config file | CJS config loaded as ESM | Rename `.js` config to `.cjs` (e.g., `postcss.config.js` → `postcss.config.cjs`) |
| `Cannot find module '@vitejs/plugin-rsc'` | App Router project missing RSC plugin | `npm install -D @vitejs/plugin-rsc` |
| `Cannot find module 'vite'` | Vite not installed | `npm install -D vite` |
| `Cannot find module 'vite'` | Vite not installed | `npm install -D vite@^8` |
| `vinext: command not found` | vinext not installed or not in PATH | Install vinext: `npm install vinext`, then run via `npx vinext` or package.json scripts |
| RSC environment crash on dev start | Native Node module (sharp, satori) loaded in RSC env | vinext auto-stubs these in production; in dev, ensure these are only imported in server code behind dynamic `import()` |
| `ASSETS binding not found` | wrangler.jsonc missing assets config | Add `"assets": { "not_found_handling": "none" }` to wrangler.jsonc |

## Vite 8 Migration Notes

Vite 8 is the preferred path for new vinext migrations. Keep Vite 7 only when you are working around a specific compatibility issue in an existing project.

- **Symptom:** deprecation warnings for `esbuild`, `optimizeDeps.esbuildOptions`, or `build.rollupOptions`.
**Cause:** Vite 8 now defaults to Oxc and Rolldown.
**Fix:** Prefer `oxc`, `optimizeDeps.rolldownOptions`, and `build.rolldownOptions` / `worker.rolldownOptions` in custom Vite config.
Expand Down Expand Up @@ -83,7 +85,7 @@ imported from \node_modules.pnpm\validator@13.15.26\node_modules\validator\es\li

After migration, confirm:

- [ ] `vinext dev` starts without errors
- [ ] `vinext dev` or `npm run dev:vinext` starts without errors
- [ ] Home page renders correctly
- [ ] Dynamic routes resolve (e.g., `/posts/[id]`)
- [ ] API routes respond (Pages Router) or route handlers respond (App Router)
Expand Down
Loading
Loading