FastAPI + Next.js: Full-Stack REST API Layihəni Sıfırdan Qur

FastAPI + Next.js: Full-Stack REST API Layihəni Sıfırdan Qur

Salam, developer dostum! 👋

Bakıda iş axtarırsan və ya artıq işləyirsən — bir şeyi yaxşı bilirsən: full-stack developer olmaq sənin bazar dəyərini ciddi artırır. LinkedIn-də Azərbaycan üzrə backend+frontend bilən developerlərə təklif olunan maaş 1200-2500 AZN arasında dəyişir, amma əgər sən həm API yaza, həm də frontend-i özün qoşa bilərsənsə, bu rəqəm 3000+ AZN-ə qədər qalxa bilər — xüsusilə ABB, Kapital Bank, PASHA Holding kimi şirkətlərdə.

Bu gün sənə FastAPI ilə REST API qurmağı və onu Next.js frontend ilə birləşdirməyi real kod nümunələri ilə göstərəcəm. Məqalənin sonunda əlində işləyən bir full-stack layihə olacaq.

---

Niyə FastAPI + Next.js?

Bu stack-i seçməyimin konkret səbəbləri var:

• FastAPI — Python dünyasının ən sürətli framework-üdür. Django REST Framework-dən 3-5x sürətli işləyir. Swagger/OpenAPI dəstəyi avtomatikdir.
• Next.js — React əsaslı, SSR və SSG dəstəkli, SEO-friendly. Vercel tərəfindən inkişaf etdirilir.
• Birlikdə — microservice arxitektura üçün ideal cütlükdür. Backend və frontend ayrı deploy olunur, komandada iş bölgüsü asanlaşır.

2025-ci ilin Stack Overflow sorğusuna görə FastAPI istifadəsi ildə 47% artıb, Next.js isə React ekosistemində 1-ci framework mövqeyini saxlayır.

---

Addım 1: FastAPI Backend — REST API Yarat

Əvvəlcə layihə strukturumuzu quraq:

project/
├── backend/
│   ├── main.py
│   └── requirements.txt
└── frontend/
    └── (next.js app)

Backend quraşdırma:

bashKopyala
mkdir backend && cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install fastapi uvicorn pydantic

main.py — Əsas API faylı:

pythonKopyala
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from typing import Optional

app = FastAPI(title="Baku Stack API", version="1.0.0")

# CORS — Next.js frontend-in API-yə müraciət edə bilməsi üçün
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Data model
class Job(BaseModel):
    id: Optional[int] = None
    title: str
    company: str
    salary_azn: int
    location: str = "Bakı"

# Sadə in-memory database
jobs_db: list[Job] = [
    Job(id=1, title="Backend Developer", company="Kapital Bank", salary_azn=2200),
    Job(id=2, title="Frontend Developer", company="ABB", salary_azn=1800),
    Job(id=3, title="Full-Stack Developer", company="PASHA Holding", salary_azn=3200),
]

@app.get("/")
def root():
    return {"message": "Baku Stack Jobs API işləyir! 🚀"}

@app.get("/api/jobs", response_model=list[Job])
def get_jobs():
    return jobs_db

@app.get("/api/jobs/{job_id}", response_model=Job)
def get_job(job_id: int):
    for job in jobs_db:
        if job.id == job_id:
            return job
    raise HTTPException(status_code=404, detail="Vakansiya tapılmadı")

@app.post("/api/jobs", response_model=Job)
def create_job(job: Job):
    job.id = len(jobs_db) + 1
    jobs_db.append(job)
    return job

@app.delete("/api/jobs/{job_id}")
def delete_job(job_id: int):
    for i, job in enumerate(jobs_db):
        if job.id == job_id:
            jobs_db.pop(i)
            return {"message": f"Vakansiya #{job_id} silindi"}
    raise HTTPException(status_code=404, detail="Vakansiya tapılmadı")

Serveri işə sal:

bashKopyala
uvicorn main:app --reload --port 8000

İndi http://localhost:8000/docs ünvanına daxil ol — avtomatik Swagger UI görəcəksən. Bəli, FastAPI bunu sənin yerinə generasiya edir. Heç bir əlavə konfiqurasiya lazım deyil.

---

Addım 2: Next.js Frontend — API-ni İstehlak Et

Frontend quraşdırma:

bashKopyala
cd .. && npx create-next-app@latest frontend --typescript --app --tailwind
cd frontend
npm install

app/page.tsx — Əsas səhifə:

typescriptKopyala
interface Job {
  id: number;
  title: string;
  company: string;
  salary_azn: number;
  location: string;
}

async function getJobs(): Promise<Job[]> {
  const res = await fetch("http://localhost:8000/api/jobs", {
    cache: "no-store", // Hər dəfə fresh data
  });
  if (!res.ok) throw new Error("API xətası");
  return res.json();
}

export default async function Home() {
  const jobs = await getJobs();

  return (
    <main className="min-h-screen bg-gray-950 text-white p-8">
      <h1 className="text-3xl font-bold mb-2">🇦🇿 Bakı Tech Vakansiyaları</h1>
      <p className="text-gray-400 mb-8">
        FastAPI + Next.js ilə qurulub | Baku Stack
      </p>

      <div className="grid gap-4 max-w-2xl">
        {jobs.map((job) => (
          <div
            key={job.id}
            className="border border-gray-700 rounded-lg p-5 hover:border-blue-500 transition"
          >
            <h2 className="text-xl font-semibold">{job.title}</h2>
            <p className="text-gray-400">{job.company} — {job.location}</p>
            <p className="text-green-400 text-lg font-bold mt-2">
              {job.salary_azn} AZN / ay
            </p>
          </div>
        ))}
      </div>
    </main>
  );
}

Frontend-i işə sal:

bashKopyala
npm run dev

http://localhost:3000 ünvanına bax — vakansiyalar FastAPI backend-dən birbaşa çəkilib göstəriləcək. 🎉

---

Arxitektura Xülasəsi

Bu layihədə data axışı belədir:

1. Next.js (port 3000) → Server Component fetch() ilə API-yə müraciət edir
2. FastAPI (port 8000) → JSON cavab qaytarır
3. Next.js → HTML render edib istifadəçiyə göstərir (SSR)

Bu yanaşmanın üstünlüyü odur ki, backend və frontend müstəqil deploy oluna bilər. Backend-i Railway və ya Render-də, frontend-i Vercel-də pulsuz host edə bilərsən.

---

Production Üçün Vacib Məsləhətlər

• CORS — production-da allow_origins-i konkret domain ilə məhdudlaşdır
• Database — jobs_db list əvəzinə PostgreSQL + SQLAlchemy və ya SQLModel istifadə et
• Auth — fastapi-jwt-auth və ya OAuth2 əlavə et
• Environment Variables — .env faylından istifadə et, heç vaxt hardcode etmə
• Error Handling — Next.js tərəfdə error.tsx boundary əlavə et

---

Portfoliona Əlavə Et

Bu layihəni bir az genişləndirsən — məsələn, iş elanı əlavə etmə formu, axtarış/filter, auth sistemi əlavə etsən — bu, müsahibədə sənin üçün ciddi avantaj olacaq. Kapital Bank-ın və PASHA-nın texniki müsahibələrində real layihə göstərə bilmək, 10 sertifikatdan güclüdür.

GitHub repo-na README.md yaz, Swagger screenshot-u əlavə et, deploy linkini qoy. Bunu edən developer Bakıda az-azdır — sən onlardan biri ol.

---

Nəticə

FastAPI + Next.js stack-i 2026-da ən aktual full-stack kombinasiyalardan biridir. Python-un sadəliyi, TypeScript-in type safety-si, hər ikisinin sürəti — sənə həm öyrənmə prosesində, həm də real işdə böyük üstünlük verir.

Kodu yaz, layihəni qur, deploy et. Bakıda developer bazarı böyüyür — hazır olanlar qazanır.

Uğurlar, developer! 🚀

— Baku Stack redaksiyası