Dashboard Pages Migration

'use client'
import { useEffect, useRef } from 'react'
import { io } from 'socket.io-client'

export function useSocket(userId) {
  const socketRef = useRef(null)

  useEffect(() => {
    // Only connect on client side
    if (typeof window === 'undefined') return

    socketRef.current = io(process.env.NEXT_PUBLIC_SOCKET_URL, {
      query: { userId },
      transports: ['websocket'],
    })

    socketRef.current.on('connect', () => {
      console.log('Socket connected:', socketRef.current.id)
    })

    return () => {
      socketRef.current?.disconnect()
    }
  }, [userId])

  return socketRef
}

'use client'
import { useParams } from 'next/navigation'

export default function PrescriptionDetail() {
  const { id } = useParams() // reads [id] from URL

  // Use 'id' to fetch prescription data
  // Everything else is identical to your Vite component
}

// BEFORE (Vite — no directive needed)
import { create } from 'zustand'

// AFTER (Next.js — MUST add 'use client' as line 1)
'use client'
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

// Rest of your store is identical