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