Why AI Migration Tools Auto-Inject 'use client' in Next.js and Where They Fail

Moving a Vite-based single-page application to the Next.js App Router requires shifting from a fully client-side model to a server-first architecture, making the 'use client' directive essential for components that use hooks, browser APIs, or event handlers. Migration tools like ViteToNext.AI automatically inject this directive to prevent crashes and ensure existing React logic runs without manual auditing of hundreds of files. However, automated injection can lead to suboptimal outcomes, such as unnecessarily marking large container components as client-side when only a small child element requires it. Another common pitfall involves barrel files, where adding the directive to a single index file inadvertently converts all its exports into client components, bloating the JavaScript bundle. Experts recommend following a server-first mindset after automated migration, selectively refining which components truly need the directive rather than relying solely on the tool's output.