কিভাবে 2026 সালে Next.js এবং Supabase দিয়ে একটি রিয়েল-টাইম অ্যাপ তৈরি করবেন

সুপাবাসে একটি পরিচালিত ব্যাকএন্ড হিসাবে একটি PostgreSQL ডাটাবেস, প্রমাণীকরণ, এবং রিয়েল-টাইম সাবস্ক্রিপশন প্রদান করে — || পরবর্তী.js দ্রুত ফুল-স্ট্যাক রিয়েল-টাইম অ্যাপ তৈরি করার জন্য। এই নির্দেশিকা ডাটাবেস থেকে স্থাপনা পর্যন্ত একটি রিয়েল-টাইম অ্যাপ তৈরি করে।কেন Next.js + Supabase?

একটি বিল্ডিং ছাড়া সম্পূর্ণ ব্যাকএন্ড:

• ডাটাবেস, প্রমাণীকরণ, সঞ্চয়স্থান, এবং রিয়েল-টাইম বাক্সের বাইরেবাস্তব পোস্টগ্রেএসকিউএল:
• একটি মালিকানাধীন ডাটাবেস নয় — স্ট্যান্ডার্ড 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} />;
}

ডাটা অ্যাক্সেস নিয়ন্ত্রণ করতে Supabase PostgreSQL রো লেভেল সিকিউরিটি (RLS) ব্যবহার করে। যেহেতু ক্লায়েন্ট সরাসরি অ্যানন কী-এর সাথে সংযোগ করে, তাই RLS নীতিগুলি ডেটাকে সুরক্ষিত রাখে — তারা নির্ধারণ করে যে কে কী পড়তে/লিখতে পারে। আপনার টেবিলে সর্বদা RLS সক্ষম করুন এবং নীতি লিখুন। RLS ছাড়া, আপনার ডেটা উন্মুক্ত হয়। RLS উৎপাদনের জন্য ঐচ্ছিক নয় – এটি সরাসরি-ক্লায়েন্ট মডেলের নিরাপত্তা ভিত্তি।

স্থাপনা

প্রায়শই জিজ্ঞাসিত প্রশ্ন

# 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.

প্রশ্ন: সুপাবেস কি আমার নিজের ব্যাকএন্ড তৈরি করার জন্য একটি ভাল বিকল্প?

উত্তর: হ্যাঁ, অনেক অ্যাপের জন্য — এটি ব্যাকএন্ড অবকাঠামো তৈরি না করেই একটি বাস্তব পোস্টগ্রেএসকিউএল ডাটাবেস, প্রমাণীকরণ, স্টোরেজ এবং রিয়েল-টাইম প্রদান করে। আপনি স্ট্যান্ডার্ড এসকিউএল (একটি মালিকানাধীন ডাটাবেস নয়) পান, তাই আপনি লক ইন করবেন না। দ্রুত ফুল-স্ট্যাক ডেভেলপমেন্ট এবং MVP-এর জন্য এটি চমৎকার।
প্রশ্নঃ সুপাবেসে রিয়েল-টাইম কিভাবে কাজ করে?

উত্তর: Supabase PostgreSQL পরিবর্তনগুলি শোনে এবং WebSockets-এর মাধ্যমে সাবস্ক্রাইব করা ক্লায়েন্টদের কাছে ঠেলে দেয়। আপনি একটি টেবিলে ইভেন্ট INSERT/UPDATE/DELETE-এ সদস্যতা নেন এবং ডেটা পরিবর্তিত হলে আপনার কলব্যাক শুরু হয়৷ ন্যূনতম কোড আপনাকে লাইভ আপডেট দেয় — চ্যাট, বিজ্ঞপ্তি এবং সহযোগী বৈশিষ্ট্যের জন্য দুর্দান্ত।
প্রশ্নঃ ক্লায়েন্ট থেকে সরাসরি সুপাবেস ব্যবহার করা কি নিরাপদ?

উত্তর: হ্যাঁ, যদি আপনি রো লেভেল সিকিউরিটি (RLS) ব্যবহার করেন। যেহেতু ক্লায়েন্ট অ্যানন কী দিয়ে সংযোগ করে, তাই প্রত্যেক ব্যবহারকারী কী পড়তে/লিখতে পারে তা RLS নীতিগুলি নিয়ন্ত্রণ করে। সর্বদা RLS সক্ষম করুন এবং নীতি লিখুন – এটি নিরাপত্তা ভিত্তি। RLS ছাড়া, আপনার ডেটা উন্মুক্ত হয়। উত্পাদনে এটি কখনই এড়িয়ে যাবেন না।
প্রশ্নঃ সুপাবেস নাকি ফায়ারবেস?

উত্তর: সুপাবেস পোস্টগ্রেএসকিউএল (স্ট্যান্ডার্ড এসকিউএল, রিলেশনাল, লক-ইন নয়) ব্যবহার করে এবং এটি ওপেন সোর্স/স্ব-হোস্টেবল। ফায়ারবেস একটি মালিকানাধীন NoSQL ডাটাবেস ব্যবহার করে। আপনি যদি এসকিউএল, রিলেশনাল ডেটা এবং লক-ইন এড়ানো পছন্দ করেন তবে সুপাবেস বেছে নিন; এর পরিপক্ক ইকোসিস্টেমের জন্য ফায়ারবেস এবং যদি NoSQL আপনার ডেটা ফিট করে। প্রমাণীকরণ এবং রিয়েল-টাইম উভয়ই অফার করে।
প্রশ্নঃ আমি কি সুপাবেসকে স্ব-হোস্ট করতে পারি?

উত্তর: হ্যাঁ — সুপাবেস ওপেন সোর্স এবং বিক্রেতা লক-ইন এড়িয়ে স্ব-হোস্ট করা যেতে পারে। বেশিরভাগই পরিচালিত ক্লাউড (উদার বিনামূল্যের স্তর) দিয়ে শুরু করে এবং প্রয়োজনে পরে স্ব-হোস্ট করতে পারে। স্ব-হোস্টিং বিকল্পটি বন্ধ বিকল্পগুলির চেয়ে একটি মূল সুবিধা।
উপসংহার

Next.js + Supabase হল 2026 সালে ফুল-স্ট্যাক রিয়েল-টাইম অ্যাপ তৈরি করার একটি শক্তিশালী, দ্রুত উপায়। সুপাবেস একটি

বাস্তব PostgreSQL ডাটাবেস, অন্তর্নির্মিত প্রমাণীকরণ, এবং রিয়েল-টাইম সাবস্ক্রিপশন – Next.js এর সাথে নির্বিঘ্নে জোড়া লাগানো। কর্মপ্রবাহ: SQL দিয়ে টেবিল তৈরি করুন, নীতিগুলির সাথে সারি স্তরের নিরাপত্তা সক্ষম করুন (নিরাপদ সরাসরি-ক্লায়েন্ট অ্যাক্সেসের জন্য গুরুত্বপূর্ণ), রিয়েল-টাইম পরিবর্তনগুলিতে সদস্যতা নিন এবং ব্যবহারকারীদের জন্য সুপাবেস প্রমাণীকরণ ব্যবহার করুন৷ Vercel-এ Next.js ফ্রন্টএন্ড স্থাপন করুন, এবং যেহেতু Supabase ইতিমধ্যেই হোস্ট করা আছে, তাই পরিচালনা করার জন্য আপনার কাছে কোনো ব্যাকএন্ড পরিকাঠামো ছাড়াই একটি ফুল-স্ট্যাক অ্যাপ লাইভ আছে। মূল নিরাপত্তা নিয়ম সর্বদা RLS সক্ষম করে — এটিই আপনার সরাসরি-অ্যাক্সেস করা ডেটা নিরাপদ রাখে। চ্যাট, সহযোগী সরঞ্জাম, ড্যাশবোর্ড এবং MVP-এর জন্য, এই স্ট্যাকটি আপনাকে ব্যাকএন্ড তৈরি বা পরিচালনা না করেই অসাধারণভাবে দ্রুত রিয়েল-টাইম ফুল-স্ট্যাক অ্যাপ তৈরি করতে দেয়। – Next.js এর সাথে নির্বিঘ্নে জোড়া লাগানো। কর্মপ্রবাহ: SQL দিয়ে টেবিল তৈরি করুন, নীতিগুলির সাথে সারি স্তরের নিরাপত্তা সক্ষম করুন (নিরাপদ সরাসরি-ক্লায়েন্ট অ্যাক্সেসের জন্য গুরুত্বপূর্ণ), রিয়েল-টাইম পরিবর্তনগুলিতে সদস্যতা নিন এবং ব্যবহারকারীদের জন্য সুপাবেস প্রমাণীকরণ ব্যবহার করুন৷ Vercel-এ Next.js ফ্রন্টএন্ড স্থাপন করুন, এবং যেহেতু Supabase ইতিমধ্যেই হোস্ট করা আছে, তাই পরিচালনা করার জন্য আপনার কাছে কোনো ব্যাকএন্ড পরিকাঠামো ছাড়াই একটি ফুল-স্ট্যাক অ্যাপ লাইভ আছে। মূল নিরাপত্তা নিয়ম সর্বদা RLS সক্ষম করে — এটিই আপনার সরাসরি-অ্যাক্সেস করা ডেটা নিরাপদ রাখে। চ্যাট, সহযোগী সরঞ্জাম, ড্যাশবোর্ড এবং MVP-এর জন্য, এই স্ট্যাকটি আপনাকে ব্যাকএন্ড তৈরি বা পরিচালনা না করেই অসাধারণভাবে দ্রুত রিয়েল-টাইম ফুল-স্ট্যাক অ্যাপ তৈরি করতে দেয়।