My App

{"id":25981,"library":"next-vite-dev","title":"Nextvi","description":"Nextvi (next-vite-dev v1.1.0) lets you run a lightweight Vite dev server alongside Next.js, consuming src/app/ pages without modifying any business code. It auto-generates react-router routes from the Next.js app directory, handles async server components by converting them to sync, and provides shims for next/link, next/image, and next/navigation. Target audience: Next.js developers suffering from high memory usage or slow HMR in large projects. Release cadence: early-stage, active development. Differentiator: zero-config, zero-code-change Vite integration with automatic route generation and wrapper overrides for server-fetch pages.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install next-vite-dev","lang":"bash","label":"npm"},{"cmd":"yarn add next-vite-dev","lang":"bash","label":"yarn"},{"cmd":"pnpm add next-vite-dev","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Tailwind CSS Vite plugin, auto-enabled if installed","package":"@tailwindcss/vite","optional":true},{"reason":"Peer dependency for React rendering","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false},{"reason":"Peer dependency for client-side routing (v6+)","package":"react-router-dom","optional":false},{"reason":"Peer dependency for Vite dev server (v5+)","package":"vite","optional":false}],"imports":[{"note":"ESM-only package. Use import syntax; requires Node >= 16.","wrong":"const nextvi = require('next-vite-dev')","symbol":"nextvi (default)","correct":"import nextvi from 'next-vite-dev'"},{"note":"This is a virtual module provided by the Vite plugin, not a real file. Named export required.","wrong":"import routes from 'virtual:auto-routes'","symbol":"routes (virtual module)","correct":"import { routes } from 'virtual:auto-routes'"},{"note":"Shim is automatic; no special import needed. But when running under Vite, it resolves to a built-in client implementation. No change to existing code.","wrong":"","symbol":"next/link shim","correct":"import Link from 'next/link'"},{"note":"Shim is automatic; works in both Next.js and Vite modes. No migration needed.","wrong":"","symbol":"next/navigation shim","correct":"import { useRouter } from 'next/navigation'"},{"note":"Shim is automatic; uses a regular img tag under Vite. No code changes needed.","wrong":"","symbol":"next/image shim","correct":"import Image from 'next/image'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport nextvi from 'next-vite-dev'\n\nexport default defineConfig({\n plugins: [nextvi()],\n})\n\n// index.html (project root)\n\n\n My App\n \n

\n \n \n\n\n// vite/entry.tsx\nimport '../src/app/globals.css'\nimport ReactDOM from 'react-dom/client'\nimport ViteApp from './ViteApp'\n\nReactDOM.createRoot(document.getElementById('root')!).render()\n\n// vite/ViteApp.tsx\nimport { Suspense } from 'react'\nimport { createBrowserRouter, RouterProvider } from 'react-router-dom'\nimport { routes } from 'virtual:auto-routes'\n\nconst router = createBrowserRouter(routes)\n\nexport default function ViteApp() {\n return (\n Loading...}>\n \n \n )\n}","lang":"typescript","description":"Initialize Nextvi by adding the Vite plugin, creating index.html, Vite entry, and ViteApp component to auto-generate routes from your existing Next.js app directory."},"warnings":[{"fix":"Upgrade to react-router-dom v6+ and use createBrowserRouter or BrowserRouter v6.","message":"Requires react-router-dom v6+. BrowserRouter or RouterProvider must be used; v5 is not supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Place entry.tsx in vite/ directory at project root.","message":"Vite entry file must be at /vite/entry.tsx (root-relative). Custom path not supported yet.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove 'include' and pass custom directories to 'customEntries' array if needed.","message":"Plugin option 'include' is deprecated; use 'customEntries' for additional directories.","severity":"deprecated","affected_versions":"<1.2.0"},{"fix":"Create a wrapper file under vite/wrappers/ mirroring the route path, using client-side fetch.","message":"Server components with async fetch will fail in Vite mode unless wrapped via vite/wrappers/.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Move pages into src/app/ directory or manually add vite routes.","message":"Only pages inside src/app/ are auto-routed. Pages outside (e.g., pages/) are ignored.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure nextvi() is added to plugins in vite.config.ts and that you are running 'pnpm vite' (not 'pnpm dev').","cause":"Virtual module is only available during Vite dev/build with the plugin enabled.","error":"Cannot find module 'virtual:auto-routes'"},{"fix":"Add 'next' as a devDependency or ensure it is hoisted: pnpm add -D next","cause":"In Vite mode, 'next/link' shim is not found if the package is not installed (it is a peer dep via Next.js).","error":"Failed to resolve import 'next/link' from 'src/app/page.tsx'"},{"fix":"Create the file vite/entry.tsx at the project root with correct content.","cause":"The entry file does not exist at the expected location.","error":"[plugin:nextvi] No Vite entry found at /vite/entry.tsx"},{"fix":"Create a wrapper in vite/wrappers/ mirroring the route path that uses useParams() from next/navigation.","cause":"Async server component without wrapper; params is undefined in client.","error":"TypeError: Cannot read properties of undefined (reading 'params')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}