Building a Healthcare App with Next.js and Supabase: A Complete Guide

// lib/supabase/client.ts
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 
export const supabase = createClientComponentClient();
 
// Authentication functions
export const signUp = async (email: string, password: string) => {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });
  return { data, error };
};

// lib/ai/symptom-checker.ts
import { GoogleGenerativeAI } from '@google/generative-ai';
 
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
 
export const analyzeSymptoms = async (symptoms: string, userInfo: any) => {
  const model = genAI.getGenerativeModel({ model: 'gemini-pro' });
 
  const prompt = `
    Analyze these symptoms: ${symptoms}
    User age: ${userInfo.age}
    Medical history: ${userInfo.medicalHistory}
    
    Provide general health insights and recommendations.
    Remember: This is not a substitute for professional medical advice.
  `;
 
  const result = await model.generateContent(prompt);
  return result.response.text();
};

// components/MedicineReminder.tsx
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase/client';
 
export const MedicineReminder = () => {
  const [reminders, setReminders] = useState([]);
 
  useEffect(() => {
    const channel = supabase
      .channel('medicine_reminders')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'reminders' }, (payload) => {
        setReminders((prev) => [...prev, payload.new]);
      })
      .subscribe();
 
    return () => supabase.removeChannel(channel);
  }, []);
 
  // Component implementation...
};

-- Enable RLS on user data
ALTER TABLE user_health_data ENABLE ROW LEVEL SECURITY;
 
-- Policy to ensure users can only access their own data
CREATE POLICY "Users can only access their own health data" ON user_health_data
  FOR ALL USING (auth.uid() = user_id);

import Image from 'next/image'
 
<Image
  src="/healthcare-icon.webp"
  alt="Healthcare"
  width={500}
  height={300}
  priority
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

// Use Supabase's built-in query optimization
const { data, error } = await supabase
  .from('health_facilities')
  .select('id, name, address, distance')
  .eq('city', userCity)
  .order('distance', { ascending: true })
  .limit(10);

// vercel.json
{
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30
    }
  },
  "env": {
    "SUPABASE_URL": "@supabase_url",
    "SUPABASE_ANON_KEY": "@supabase_anon_key",
    "GEMINI_API_KEY": "@gemini_api_key"
  }
}