2026 में Next.js और Supabase के साथ एक रियल-टाइम ऐप कैसे बनाएं

सुपाबेस एक प्रबंधित बैकएंड के रूप में एक PostgreSQL डेटाबेस, प्रमाणीकरण और वास्तविक समय सदस्यता प्रदान करता है –के साथ पूरी तरह से जुड़ता है। Next.js फ़ुल-स्टैक रीयल-टाइम ऐप्स शीघ्रता से बनाने के लिए। यह मार्गदर्शिका डेटाबेस से परिनियोजन तक एक वास्तविक समय ऐप बनाती है।

Next.js + सुपाबेस क्यों?

• बिना किसी निर्माण के पूर्ण बैकएंड: डेटाबेस, प्रमाणीकरण, भंडारण, और बॉक्स से बाहर वास्तविक समय
• वास्तविक पोस्टग्रेएसक्यूएल: मालिकाना डेटाबेस नहीं – मानक SQL आप सीधे क्वेरी कर सकते हैं
• वास्तविक समय सदस्यताएँ: न्यूनतम कोड के साथ डेटाबेस परिवर्तनों को लाइव सुनें
• बिल्ट-इन ऑथ: ईमेल, OAuth, मैजिक लिंक – निर्माण के लिए कोई बुनियादी ढांचा नहीं
• खुला स्रोत: स्व-मेज़बान, विक्रेता लॉक-इन से बचना

सेटअप

npx create-next-app@latest my-app
cd my-app
npm install @supabase/supabase-js @supabase/ssr

# Create a project at supabase.com, then add to .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

सुपाबेस क्लाइंट सेटअप

// lib/supabase.js
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

एक तालिका बनाएं (सुपाबेस में एसक्यूएल संपादक)

-- Create a messages table
create table messages (
  id uuid default gen_random_uuid() primary key,
  content text not null,
  user_id uuid references auth.users,
  created_at timestamptz default now()
);

-- Enable Row Level Security
alter table messages enable row level security;

-- Policy: anyone can read messages
create policy "Messages are viewable by everyone"
  on messages for select using (true);

-- Policy: authenticated users can insert their own messages
create policy "Users can insert their own messages"
  on messages for insert
  with check (auth.uid() = user_id);

रीयल-टाइम सदस्यताएँ

// components/Chat.jsx
'use client';
import { useState, useEffect } from 'react';
import { supabase } from '@/lib/supabase';

export default function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // Load existing messages
    supabase.from('messages').select('*').order('created_at')
      .then(({ data }) => setMessages(data || []));

    // Subscribe to new messages in real time
    const channel = supabase
      .channel('messages')
      .on('postgres_changes',
        { event: 'INSERT', schema: 'public', table: 'messages' },
        (payload) => {
          setMessages(prev => [...prev, payload.new]);
        }
      )
      .subscribe();

    // Cleanup subscription
    return () => { supabase.removeChannel(channel); };
  }, []);

  const sendMessage = async (content) => {
    const { data: { user } } = await supabase.auth.getUser();
    await supabase.from('messages').insert({ content, user_id: user.id });
  };

  return (
    <div>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
    </div>
  );
}

प्रमाणीकरण

// Sign up
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({ email, password });
  if (error) throw error;
  return data;
}

// Sign in
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) throw error;
  return data;
}

// OAuth (Google, GitHub, etc.)
async function signInWithGitHub() {
  await supabase.auth.signInWithOAuth({ provider: 'github' });
}

// Get current user
const { data: { user } } = await supabase.auth.getUser();

// Sign out
await supabase.auth.signOut();

सर्वर घटक और डेटा फ़ेचिंग

// app/page.jsx - Server Component fetching data
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    { cookies: { get: (name) => cookieStore.get(name)?.value } }
  );

  const { data: messages } = await supabase
    .from('messages')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(20);

  return <MessageList initialMessages={messages} />;
}

पंक्ति स्तरीय सुरक्षा: सुरक्षित डेटा की कुंजी

डेटा एक्सेस को नियंत्रित करने के लिए सुपाबेस PostgreSQL रो लेवल सिक्योरिटी (आरएलएस) का उपयोग करता है। चूंकि क्लाइंट सीधे एनॉन कुंजी से जुड़ता है, आरएलएस नीतियां डेटा को सुरक्षित रखती हैं – वे परिभाषित करती हैं कि कौन क्या पढ़/लिख सकता है। हमेशा अपनी टेबल पर आरएलएस सक्षम करें और नीतियां लिखें। आरएलएस के बिना, आपका डेटा उजागर हो जाता है। आरएलएस उत्पादन के लिए वैकल्पिक नहीं है – यह डायरेक्ट-क्लाइंट मॉडल की सुरक्षा नींव है।

परिनियोजन

# Deploy to Vercel (seamless with Next.js)
# 1. Push to GitHub
# 2. Import the repo in Vercel
# 3. Add environment variables (NEXT_PUBLIC_SUPABASE_URL, ANON_KEY)
# 4. Deploy

# Supabase is already hosted - no backend deployment needed.
# Your Next.js frontend on Vercel + Supabase backend = full-stack app live.

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्या सुपाबेस मेरा अपना बैकएंड बनाने का एक अच्छा विकल्प है?
उत्तर: हां, कई ऐप्स के लिए – यह बैकएंड इंफ्रास्ट्रक्चर के निर्माण के बिना एक वास्तविक पोस्टग्रेएसक्यूएल डेटाबेस, ऑथ, स्टोरेज और वास्तविक समय प्रदान करता है। आपको मानक एसक्यूएल (मालिकाना डेटाबेस नहीं) मिलता है, इसलिए आप लॉक नहीं होते हैं। यह तेजी से पूर्ण-स्टैक विकास और एमवीपी के लिए उत्कृष्ट है।

प्रश्न: सुपराबेस में रीयल-टाइम कैसे काम करता है?
उ: सुपाबेस PostgreSQL परिवर्तनों को सुनता है और उन्हें WebSockets पर सब्सक्राइब किए गए क्लाइंट तक भेजता है। आप किसी टेबल पर INSERT/UPDATE/DELETE ईवेंट की सदस्यता लेते हैं, और जब डेटा बदलता है तो आपका कॉलबैक सक्रिय हो जाता है। न्यूनतम कोड आपको लाइव अपडेट देता है – चैट, सूचनाओं और सहयोगी सुविधाओं के लिए बढ़िया।

प्रश्न: क्या क्लाइंट से सीधे सुपाबेस का उपयोग करना सुरक्षित है?
उत्तर: हां, यदि आप रो लेवल सिक्योरिटी (आरएलएस) का उपयोग करते हैं। चूंकि क्लाइंट एनोन कुंजी से जुड़ता है, आरएलएस नीतियां नियंत्रित करती हैं कि प्रत्येक उपयोगकर्ता क्या पढ़/लिख सकता है। हमेशा आरएलएस सक्षम करें और नीतियां लिखें – यह सुरक्षा आधार है। आरएलएस के बिना, आपका डेटा उजागर हो जाता है। इसे उत्पादन में कभी न छोड़ें.

प्रश्न: सुपाबेस या फायरबेस?
उ: सुपाबेस PostgreSQL (मानक SQL, रिलेशनल, कोई लॉक-इन नहीं) का उपयोग करता है और खुला स्रोत/स्व-होस्टेबल है। फायरबेस एक मालिकाना NoSQL डेटाबेस का उपयोग करता है। यदि आप SQL, रिलेशनल डेटा और लॉक-इन से बचना पसंद करते हैं तो सुपाबेस चुनें; अपने परिपक्व पारिस्थितिकी तंत्र के लिए फायरबेस और यदि NoSQL आपके डेटा में फिट बैठता है। दोनों प्रमाणीकरण और वास्तविक समय की पेशकश करते हैं।

प्रश्न: क्या मैं सुपाबेस की स्वयं-मेजबानी कर सकता हूँ?
उत्तर: हाँ – सुपाबेस खुला स्रोत है और विक्रेता लॉक-इन से बचते हुए इसे स्वयं-होस्ट किया जा सकता है। अधिकांश प्रबंधित क्लाउड (उदार फ्री टियर) से शुरू होते हैं और जरूरत पड़ने पर बाद में स्वयं-होस्ट कर सकते हैं। बंद विकल्पों की तुलना में स्व-होस्टिंग विकल्प एक महत्वपूर्ण लाभ है।

निष्कर्ष

Next.js + Supabase 2026 में फुल-स्टैक रीयल-टाइम ऐप्स बनाने का एक शक्तिशाली, तेज़ तरीका है। Supabase एकप्रदान करता है। वास्तविक PostgreSQL डेटाबेस, अंतर्निहित प्रमाणीकरण, और वास्तविक समय सदस्यताएँ – Next.js के साथ सहजता से युग्मित होना। वर्कफ़्लो: SQL के साथ तालिकाएँ बनाएँ, नीतियों के साथ पंक्ति स्तर सुरक्षा सक्षम करें (सुरक्षित प्रत्यक्ष-ग्राहक पहुँच के लिए महत्वपूर्ण), वास्तविक समय में परिवर्तनों की सदस्यता लें, और उपयोगकर्ताओं के लिए Supabase प्रमाणीकरण का उपयोग करें। नेक्स्ट.जेएस फ्रंटएंड को वर्सेल में तैनात करें, और चूंकि सुपाबेस पहले से ही होस्ट किया गया है, आपके पास प्रबंधन के लिए कोई बैकएंड इंफ्रास्ट्रक्चर के साथ एक पूर्ण-स्टैक ऐप लाइव है। मुख्य सुरक्षा नियम हमेशा आरएलएस को सक्षम करना है – यह वह है जो आपके सीधे एक्सेस किए गए डेटा को सुरक्षित रखता है। चैट, सहयोगी टूल, डैशबोर्ड और एमवीपी के लिए, यह स्टैक आपको बैकएंड के निर्माण या प्रबंधन के बिना उल्लेखनीय रूप से तेजी से वास्तविक समय के फुल-स्टैक ऐप्स बनाने की सुविधा देता है।