MERN → Next.js 15 · HealthOps Startup
The Complete
Migration Playbook
A step-by-step guide to migrate your Vite React frontend to Next.js + shadcn/ui. Your Express.js backend, MongoDB, Zustand, and Tailwind CSS are completely untouched. Only the frontend rendering changes.
14
Weeks Full-Time
10
Total Phases
Zero
Backend Changes
100%
SEO Crawlable
This migration does NOT change your backend
Your Express.js API, MongoDB database, JWT authentication, AWS S3 uploads, and Socket.io server are completely untouched. This migration only changes how the frontend is rendered and served.
Tech Stack
Industry 5.0 Choices
Every tool picked for healthcare-grade scalability, accessibility compliance, and zero relearning.
Next.js 15
App Router, SSR/SSG/ISR, React Server Components
Used by Luma Health, Healthie, 1mg. SEO + Core Web Vitals built-in.
shadcn/ui
Copy-paste components built on Radix UI. You own every line.
No vendor lock-in. WCAG 2.1 AA compliant. Used by Linear, Vercel.
Tailwind CSS v4
Already in your project — config migrates 1:1, zero changes.
Just update content paths in tailwind.config.js.
Zustand
Your existing stores — just add 'use client' at top of each file.
Zero relearning. Works perfectly in Next.js client components.
React Hook Form + Zod
Type-safe form validation with schema. Replaces manual state.
Industry standard for healthcare forms. Built into shadcn Form.
TanStack Table
Headless, composable table for prescriptions, reports, staff data.
Powers most healthcare SaaS data tables. shadcn DataTable uses it.
Sonner
Best-in-class toast library. Replaces your custom notification UI.
Works with Socket.io events. Included in shadcn. 0 config.
Next.js Middleware
Edge-level route protection. Runs before ANY page load.
Faster + more secure than client-side PrivateRoute wrappers.
next/image
Auto WebP, lazy loading, CLS prevention, CDN optimization.
Major Core Web Vitals boost. Drop-in for your S3 images.
Axios (unchanged)
All your API calls are identical. Only env prefix changes.
VITE_API_URL → NEXT_PUBLIC_API_URL. That's it.
next-sitemap
Auto-generates sitemap.xml + robots.txt at every build.
Essential for AI crawler discoverability. 5-minute setup.
Vercel Analytics
Real User Monitoring + Core Web Vitals. Free on Vercel.
One-click enable in Vercel dashboard. No code changes needed.
Migration Impact
What Changes
Clear mapping of what changes, what stays, and what effort is needed.
| Item | Current | After Migration | Effort |
|---|---|---|---|
| Framework | React 18 + Vite | React 19 + Next.js 15 | Change |
| Routing | react-router-dom | File-based App Router | Change |
| Protected routes | PrivateRoute.jsx wrapper | middleware.js (edge) | Change |
| useNavigate | react-router-dom | useRouter from next/navigation | Rename |
| Link component | react-router-dom | next/link | Rename |
| Env variables | VITE_API_URL | NEXT_PUBLIC_API_URL | Rename |
| index.html | Single HTML entry | app/layout.jsx | Replace |
| vite.config.js | Build config | next.config.js | Replace |
| Zustand stores | src/store/*.js | Same + add 'use client' | Same |
| Tailwind CSS | tailwind.config.js | Same config, update paths | Same |
| Axios API calls | axios.get(VITE_URL…) | axios.get(NEXT_PUBLIC_URL…) | Same |
| Socket.io | socket.js utility | Same + wrap in useEffect | Same |
| Public pages | CSR — blank to crawlers | SSG — fully crawlable | ★ Major Win |
| Components | Custom JSX | Same + shadcn/ui additions | ★ Enhanced |
| Backend (Express) | Node/Express/MongoDB | Untouched — zero changes | Zero Change |
| JWT / Auth logic | Backend tokens | Untouched | Zero Change |
| AWS S3 uploads | Calls backend /upload | Same API call | Zero Change |
| Deployment platform | Vercel | Vercel — same platform | Same |
Implementation Phases
Post-Migration
Post-Migration Roadmap
Industry 5.0 Enhancements
After the core migration is stable, these features elevate from startup to enterprise.
AI Health Assistant
Anthropic API in Next.js Server Actions — no separate AI backend needed.
Drug interaction checker
Medical report summarizer
Symptom analysis chatbot
Prescription explanation tool
Progressive Web App
Install on phone, work offline. Patients view prescriptions without internet.
next-pwa library (5 min setup)
Offline prescription cache
Push notifications
App manifest + icons
Telemedicine Video
WebRTC consultations directly in browser. No app download required.
Daily.co or Agora SDK
Doctor-patient video calls
In-call prescription creation
Session recording (with consent)
WCAG 2.1 AA Compliance
Healthcare platforms legally need accessibility. shadcn/ui covers 90% automatically.
Screen reader tested
Full keyboard navigation
High contrast support
axe DevTools CI check
Healthcare Security
Medical data needs higher security than standard apps.
CSP headers via next.config
Rate limiting on auth routes
Audit logs for medical actions
Data encryption at rest
Observability
Know exactly what's failing and how users experience the platform.
Sentry error tracking
PostHog product analytics
Vercel Analytics (free)
Custom health dashboards
Schedule
14-Week Timeline
Full-time (8 hrs/day) = 14 weeks. Part-time (4 hrs/day) = 22–24 weeks. With a 2-person team = 8–9 weeks.
Week 1
Phase 00 + 01 — Setup
Audit codebase, scaffold Next.js, configure all tools, copy stores + components
Week 2
Phase 02 + 03 — Public + Auth
Home, About, Pricing, Team (SSG). All login/signup pages for all user types.
Week 3
Phase 04 — Middleware + Layout
middleware.js protecting all routes. Dashboard layout with sidebar + header.
Week 4–5
Phase 05a — User + Doctor
All User dashboard pages + Doctor dashboard + full prescription module.
Week 6
Phase 05b — Admin + Founder
Hospital dashboard, Admin staff management, Founder directory, Medical dashboard.
Week 7–8
Phase 06a — Forms + Tables
shadcn DataTable for prescriptions, react-hook-form for all forms, zod schemas.
Week 9
Phase 06b — Polish
Socket.io hook, Sonner toasts, next/image, Skeleton loaders, Sheet mobile nav.
Week 10
Phase 07 — SEO + A11y
Lighthouse audit, JSON-LD, sitemap, robots.txt, axe DevTools accessibility fixes.
Week 11
Phase 08 — Testing
All user flows, cross-browser, mobile, real-time Socket.io, crawler verification.
Week 12
Phase 09 — Launch
Vercel deploy, DNS switch, Search Console, Analytics. Medicares goes live.
Week 13-14
Phase 10 — DevOps
Dockerization, CI/CD pipelines, Terraform infrastructure, HIPAA security auditing, metrics.
Architecture
Deployment Architecture
| Service | What | Platform | URL |
|---|---|---|---|
| Frontend | Next.js 15 App | Vercel (free/pro) | www.medicares.in |
| Backend | Express.js API — unchanged | Render / Railway | api.medicares.in |
| Database | MongoDB — unchanged | MongoDB Atlas | Internal connection |
| File Storage | AWS S3 — unchanged | AWS ap-south-1 (Mumbai) | CDN via CloudFront |
| Templates — unchanged | Nodemailer / SendGrid | Backend service | |
| Monitoring | Error + performance | Sentry + Vercel Analytics | Dashboard |
ShipDesk · MERN → Next.js 15 + shadcn/ui · Industry 5.0 · 14 Weeks