vinext-vite-nextjs
vinext-vite-nextjs — an installable skill for AI agents.
By reason-machines · 1,339 installs
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs
Source repository · Upstream listing
vinext — Next.js API on Vite, Deploy Anywhere
Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
vinext is a Vite plugin that reimplements the Next.js public API surface (routing, SSR, RSC, next/ imports, CLI) so existing Next.js apps run on Vite instead of the Next.js compiler. It targets ~94% API coverage, supports both Pages Router and App Router, and deploys natively to Cloudflare Workers with optional Nitro support for AWS, Netlify, Vercel, and more.
Installation
New project (migrate from Next.js)
This will:
1. Run compatibility check ( vinext check )
2. Install vite , @vitejs/plugin react as devDependencies
3. Install @vitejs/plugin rsc , react server dom webpack for App Router
4. Add "type": "module" to package.json
5. Rename CJS config files (e.g. postcss.config.js → postcss.config.cjs )
6. Add dev:vinext and build:vinext scripts
7. Generate a minimal vite.config.ts
Migration is non destructive — Next.js still works alongside vinext.
Manual installation
Update package.json scripts:
Agent Skill (AI assisted migration)
CLI Reference
Command Description
vinext dev Start dev server with HMR
vinext build Production build
vinext start Local production server for testing
vinext deploy Build + deploy to Cloudflare Workers
vinext init Automated migration from Next.js
vinext check Scan for compatibility issues before migrating
vinext lint Delegate to eslint or oxlint
CLI Options
Configuration
vinext auto detects app/ or pages/ directory and loads next.config.js automatically. No vite.config.ts is required for basic usage.
Minimal vite.config.ts
App Router vite.config.ts
Cloudflare Workers with bindings
Other platforms via Nitro
Project Structure
vinext uses the same directory conventions as Next.js — no changes required:
Code Examples
Pages Router — SSR page
Pages Router — Static generation
Pages Router — API route
App Router — Server Component
App Router — Route Handler
App Router — Server Action
Middleware
Cloudflare Workers — Bindings access
Image optimization
Link and navigation
Deployment
Cloudflare Workers
For CI/CD, set CLOUDFLARE API TOKEN environment variable instead of wrangler login .
wrangler.toml (Cloudflare config)
Netlify / Vercel / AWS via Nitro
next.config.js Support
vinext loads your existing next.config.js automatically:
Compatibility Check
Run before migrating to identify unsupported features:
This scans for:
Unsupported next.config.js options
Deprecated Pages Router APIs
Experimental Next.js features not yet supported
CJS config file conflicts
Common Patterns
Environment variables
Works the same as Next.js — .env , .env.local , .env.production :
TypeScript path aliases
Tailwind CSS
Troubleshooting
ESM conflicts with CJS config files
Ensure package.json has "type": "module" .
vinext init overwrites existing vite.config.ts
Skip compatibility check during init
Custom port
wrangler not authenticated for deploy
Dry run deploy to verify config
App Router multi environment build issues
App Router builds produce three environments (RSC + SSR + client). If you see build errors, ensure all three plugins are installed:
And your vite.config.ts includes both react() and rsc() plugins in the correct order.
What's Supported (~94% of Next.js API)
✅ Pages Router (SSR, SSG, ISR, API routes)
✅ App Router (RSC, Server Actions, Route Handlers, Layouts, Loading, Error boundaries)
✅ Middleware
✅ next/image , next/link , next/router , next/navigation , next/head
✅ next/font , next/dynamic
✅ next.config.js (redirects, rewrites, headers, env, images)
✅ Cloudflare Workers native deployment with bindings
✅ HMR in development
✅ TypeScript, Tailwind CSS, CSS Modules
⚠️ Experimental Next.js features — lower priority
❌ Undocumented Vercel specific behavior — intentionally not supported