Next.js + Supabase ilə Tam Stack App: Bir Həftəlik Praktiki Yol Xəritəsi

Niyə Məhz Bu Stack?

Bakıda developer kimi işləyəndə bir reallıqla tez-tez qarşılaşırsan: ya freelance layihə gəlir "tez olsun, ucuz olsun", ya da öz startup ideyanı sınamaq istəyirsən, amma backend infrastrukturu qurmaq həftələr alır. Məhz buna görə Next.js + Supabase kombinasiyası son iki ildə dünyada — və Bakıda da — ən sürətli full-stack development yollarından birinə çevrilib.

Stack Overflow-un 2025 Developer Survey-inə görə, Next.js artıq web framework-lər arasında istifadə baxımından ilk üçlükdədir. Supabase isə "open-source Firebase alternativi" kimi 2025-də 80.000+ production layihəyə çatıb. Bu ikisini birləşdirəndə auth, database, real-time, storage — hamısı hazırdır. Sən yalnız məhsuluna fokuslanırsan.

Turbo.az, Tap.az kimi platformaların klonu deyil, amma oxşar funksionallıqlı MVP-ni — istifadəçi qeydiyyatı, CRUD əməliyyatları, real-time update — bir həftədə çıxarmaq real şeydir. Gəl, bunu günlər üzrə planlaşdıraq.

Gün 1-2: Layihə Quruluşu və Auth

İlk addım — layihəni yaratmaq:

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

Supabase-də yeni layihə aç (https://supabase.com — free tier kifayətdir, 500 MB database, 1 GB storage). Sonra .env.local faylını yarat:

envKopyala
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

Supabase client-i yaratmaq üçün lib/supabase.ts:

typescriptKopyala
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

Auth üçün Supabase-in built-in email/password və ya Google OAuth istifadə edə bilərsən. Login səhifəsi üçün sadə bir nümunə:

typescriptKopyala
'use client'
import { createClient } from '@/lib/supabase'
import { useState } from 'react'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const supabase = createClient()

  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    if (error) alert(error.message)
    else window.location.href = '/dashboard'
  }

  return (
    <div className="flex flex-col gap-4 max-w-md mx-auto mt-20">
      <h1 className="text-2xl font-bold">Daxil ol</h1>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="border p-2 rounded"
      />
      <input
        type="password"
        placeholder="Şifrə"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        className="border p-2 rounded"
      />
      <button onClick={handleLogin} className="bg-blue-600 text-white p-2 rounded">
        Daxil ol
      </button>
    </div>
  )
}

Bu, 50 sətirdən az kodla işləyən auth sistemidir. Firebase-dən fərqli olaraq, Supabase altında PostgreSQL oturur — yəni SQL biliyin burada birbaşa işə yarayır.

Gün 3-4: Database və CRUD

Supabase Dashboard-da SQL Editor-a keç və cədvəlini yarat. Tutaq ki, iş elanları platforması qurursan:

sqlKopyala
CREATE TABLE jobs (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  company TEXT NOT NULL,
  salary_min INTEGER,
  salary_max INTEGER,
  location TEXT DEFAULT 'Bakı',
  created_at TIMESTAMPTZ DEFAULT NOW(),
  user_id UUID REFERENCES auth.users(id)
);

ALTER TABLE jobs ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Hər kəs elanları görə bilər"
  ON jobs FOR SELECT USING (true);

CREATE POLICY "Yalnız öz elanını redaktə et"
  ON jobs FOR UPDATE USING (auth.uid() = user_id);

Row Level Security (RLS) — Supabase-in ən güclü cəhətlərindən biridir. Backend yazmadan database səviyyəsində authorization qurmuş olursan.

Next.js Server Component ilə dataları çəkmək:

typescriptKopyala
import { createServerComponentClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export default async function JobsPage() {
  const supabase = createServerComponentClient({ cookies })
  const { data: jobs } = await supabase
    .from('jobs')
    .select('*')
    .order('created_at', { ascending: false })

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">İş Elanları</h1>
      {jobs?.map((job) => (
        <div key={job.id} className="border p-4 rounded mb-4">
          <h2 className="text-xl font-semibold">{job.title}</h2>
          <p className="text-gray-600">{job.company} · {job.location}</p>
          <p className="text-green-600 font-medium">
            {job.salary_min}-{job.salary_max} AZN
          </p>
        </div>
      ))}
    </div>
  )
}

Burada Server Component istifadə etdiyimiz üçün data server tərəfdə render olunur — SEO üçün əladır, client-ə əlavə JavaScript göndərilmir.

Gün 5-6: Real-time və Polish

Supabase-in real-time subscription-ı ilə yeni elan əlavə olunanda səhifə avtomatik yenilənsin:

typescriptKopyala
'use client'
import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase'

export function RealtimeJobs({ initialJobs }) {
  const [jobs, setJobs] = useState(initialJobs)
  const supabase = createClient()

  useEffect(() => {
    const channel = supabase
      .channel('jobs-channel')
      .on('postgres_changes',
        { event: 'INSERT', schema: 'public', table: 'jobs' },
        (payload) => setJobs((prev) => [payload.new, ...prev])
      )
      .subscribe()

    return () => { supabase.removeChannel(channel) }
  }, [supabase])

  return jobs.map((job) => <JobCard key={job.id} job={job} />)
}

Bu iki günü həmçinin Tailwind ilə UI-ı gözəlləşdirməyə, loading skeleton-lar əlavə etməyə və error handling-ə sərf et. shadcn/ui component kitabxanası burada vaxtına çox qənaət edəcək — npx shadcn@latest add button card input ilə hazır komponentlər gəlir.

Gün 7: Deploy və Launch

Vercel-ə deploy — keçmişdə server kirayələmək, nginx konfiqurasiya etmək lazım idi. İndi:

bashKopyala
npm i -g vercel
vercel --prod

Bu qədər. SSL, CDN, edge network — hamısı avtomatikdir. Free tier-də aylıq 100 GB bandwidth var, MVP üçün kifayətdir.

Bakı Konteksti: Bu Niyə Vacibdir?

LinkedIn-də Bakıdakı iş elanlarına baxsan, Next.js tələb edən vakansiyalar son bir ildə nəzərəçarpacaq artıb. Azərbaycanda orta full-stack developer maaşı 1500-3000 AZN arasındadır, amma Next.js + cloud stack bilən developer 2500-4500 AZN aralığına çıxa bilir. PASHA Holding, Kapital Bank texnoloji komandaları, ABB Tech kimi şirkətlər modern stack-ə keçid edir.

Freelance bazarda isə bu stack-lə kiçik bir SaaS və ya marketplace MVP-si qurmaq sənə 500-2000 USD arası layihələr gətirə bilər — Upwork-dəki orta qiymətlərə əsasən.

Nəticə: Stack Seçimi Karyera Seçimidir

Bir həftə ərzində Next.js + Supabase ilə real, işləyən, deploy olunmuş bir app qura bilərsən. Bu sadəcə texniki bacarıq deyil — bu, sənin portfolio-na qoyacağın, müsahibədə göstərəcəyin, hətta birbaşa monetizasiya edə biləcəyin bir layihədir.

Ən vacib addım — bu məqaləni oxuyub bağlamamaq, terminalı açıb npx create-next-app@latest yazmağdır. Qalanı gələcək.

---

Sualın var? GitHub repo və ya konkret texniki problem ilə bağlı @bakustack yaz — cavablandıracağıq.