Migrating a Vite i18n App to Next.js Without Breaking Everything

Short summary

Migrating an i18n-enabled Vite SPA to Next.js requires shifting from client-side language detection (localStorage) to URL-first routing via Middleware and the App Router. Use Server Components for data fetching and SEO, Client Components for interactivity, and import translations dynamically to reduce bundle size. Critical gotchas: sync client state with URL params to avoid hydration errors, update all Link components with locale segments, and localize metadata via generateMetadata.

• •Switch from localStorage-based language detection to URL-first routing with Next.js Middleware
• •Split components strategically: Server for data/SEO, Client for interactivity
• •Avoid hydration mismatches, hardcoded links, and third-party library language context issues

Generated with AI, which can make mistakes.