# vinext-vite-nextjs

Guides your AI assistant through running Next.js codebases on Vite and deploying them to Cloudflare Workers.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/vinext-vite-nextjs/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/vinext-vite-nextjs

## What it does

This skill equips coding assistants with instructions for `vinext`. The plugin re-creates the public surface of Next.js on top of Vite, aiming for around 94% API coverage. It accommodates SSR, standard `next/*` imports, and both directory structures: `pages/` and `app/`.

Migration avoids breaking current workflows: Next.js still functions alongside Vite. Simple setups read `next.config.js` directly without an extra config file. However, App Router setups strictly demand `@vitejs/plugin-rsc` and `react-server-dom-webpack`.

Cloud deployment targets Cloudflare Workers out of the box via `vinext deploy`. Other cloud providers connect using Nitro presets configured inside `vite.config.ts`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vinext-vite-nextjs/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vinext-vite-nextjs/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vinext-vite-nextjs/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vinext-vite-nextjs/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills vinext-vite-nextjs
```

2. **Manually: put the files in place**
- File: `.github/skills/vinext-vite-nextjs/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/vinext-vite-nextjs
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vinext-vite-nextjs/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/vinext-vite-nextjs/SKILL.md

## When to use it
- switch an existing Next.js build over to Vite
- deploy a Next.js application to Cloudflare Workers
- verify code compatibility using `vinext check`
- configure Vite for React Server Components

## Example prompts
- Help me transition this repository from Next.js to Vite using vinext
- Set up Cloudflare Workers deployment for our Next.js frontend
- Inspect this codebase for vinext compatibility and generate a Vite config

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 139 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md