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ş bazarına baxsan, bir şey aydın görünür: full-stack developer olmağın dəyəri hər il artır. ABB, Kapital Bank, Pasha Holding kimi şirkətlərin vakansiyalarında "REST API təcrübəsi", "React/Next.js bilməsi" tələbləri artıq standart hala gəlib. Junior full-stack developer maaşı Bakıda 800-1500 AZN arasında başlayır, amma FastAPI + Next.js kimi müasir stack bilənsə, bu rəqəm 1800-3000 AZN-ə qədər qalxa bilir.

Bu gün sənə real bir layihə quracağıq: FastAPI ilə REST API backend + Next.js ilə frontend. Məhsullar siyahısı göstərən sadə, amma tam işlək bir full-stack app.

---

Niyə FastAPI + Next.js?

Gəl qısaca bu stack-in üstünlüklərinə baxaq:

• FastAPI — Python dünyasının ən sürətli web framework-üdür. Django REST-dən 3-5x sürətlidir, async dəstəyi var, avtomatik Swagger docs generasiya edir.
• Next.js — React üzərində qurulub, SSR (Server-Side Rendering), API routes, file-based routing kimi killer feature-ləri var.
• Birlikdə — FastAPI backend-i API verir, Next.js isə həm SEO-friendly frontend, həm də API consumer rolunu oynayır.

2025-ci ilin Stack Overflow Developer Survey-ə görə, FastAPI artıq "most loved web framework" siyahısında 2-ci yerdədir. Next.js isə frontend framework-lar arasında React-dən sonra ən çox istifadə olunan texnologiyadır.

---

Addım 1: FastAPI Backend-i Qururuq

Əvvəlcə layihə strukturu yaradaq:

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

main.py — Əsas API faylı

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

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

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

# Data model
class Product(BaseModel):
    id: int
    name: str
    price: float
    in_stock: bool

# Sadə in-memory database
products_db: list[Product] = [
    Product(id=1, name="Lenovo ThinkPad X1", price=2899.99, in_stock=True),
    Product(id=2, name="Mechanical Keyboard", price=189.50, in_stock=True),
    Product(id=3, name="USB-C Hub 7-in-1", price=45.00, in_stock=False),
    Product(id=4, name="27\" Monitor 4K", price=749.99, in_stock=True),
]

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

@app.get("/api/products", response_model=list[Product])
def get_products():
    return products_db

@app.get("/api/products/{product_id}", response_model=Product)
def get_product(product_id: int):
    for product in products_db:
        if product.id == product_id:
            return product
    raise HTTPException(status_code=404, detail="Məhsul tapılmadı")

@app.post("/api/products", response_model=Product, status_code=201)
def create_product(product: Product):
    products_db.append(product)
    return product

Backend-i işə sal:

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

İndi brauzerdə http://localhost:8000/docs aç — avtomatik Swagger UI görəcəksən. Bu, FastAPI-nin ən güclü feature-lərindən biridir. Heç bir əlavə konfiqurasiya lazım deyil.

---

Addım 2: Next.js Frontend Qururuq

Yeni terminal aç:

bashKopyala
npx create-next-app@latest frontend --typescript --tailwind --app
cd frontend
npm run dev

API-dən data çəkmək — app/page.tsx

typescriptKopyala
interface Product {
  id: number;
  name: string;
  price: number;
  in_stock: boolean;
}

async function getProducts(): Promise<Product[]> {
  const res = await fetch("http://localhost:8000/api/products", {
    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 products = await getProducts();

  return (
    <main className="min-h-screen bg-gray-950 text-white p-8">
      <h1 className="text-3xl font-bold mb-2">🛒 Baku Store</h1>
      <p className="text-gray-400 mb-8">
        FastAPI + Next.js ilə qurulub
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((product) => (
          <div
            key={product.id}
            className="bg-gray-900 border border-gray-800 rounded-xl p-6
                       hover:border-purple-500 transition-colors"
          >
            <h2 className="text-xl font-semibold mb-2">{product.name}</h2>
            <p className="text-2xl text-purple-400 font-bold">
              {product.price} AZN
            </p>
            <span
              className={`inline-block mt-3 px-3 py-1 rounded-full text-sm ${
                product.in_stock
                  ? "bg-green-900 text-green-300"
                  : "bg-red-900 text-red-300"
              }`}
            >
              {product.in_stock ? "✓ Stokda var" : "✗ Stokda yoxdur"}
            </span>
          </div>
        ))}
      </div>
    </main>
  );
}

Bu Next.js Server Component-dir — data server tərəfdə fetch olunur, SEO üçün əladır.

---

Nə Baş Verir? Axış Belə Gedir:

1. İstifadəçi → localhost:3000 açır
2. Next.js Server → localhost:8000/api/products-a request göndərir
3. FastAPI → products siyahısını JSON qaytarır
4. Next.js → HTML render edib istifadəçiyə göndərir

---

Production Məsləhətləri

Bu demo-nu real layihəyə çevirmək üçün:

• Database əlavə et — SQLAlchemy və ya Tortoise ORM ilə PostgreSQL qoş. In-memory data production-da işləməz.
• Environment variables — API URL-ni .env.local faylında saxla: NEXT_PUBLIC_API_URL=https://api.senindomain.az
• Authentication — JWT token ilə fastapi-jwt-auth və ya OAuth2 istifadə et.
• Deploy — Backend-i Railway və ya Render-ə, frontend-i Vercel-ə deploy et. Hər ikisi pulsuz tier təklif edir.
• Docker — docker-compose.yml ilə hər iki servisi bir əmrlə qaldır.

---

Bakı İş Bazarında Bu Stack-in Dəyəri

Hazırda LinkedIn-də "FastAPI" axtarışı Azərbaycan üzrə 35+ aktiv vakansiya göstərir. "Next.js" ilə bu rəqəm 50+-dır. Hər ikisini bilən developer-lər üçün rəqabət azdır, tələbat isə artır.

Bir neçə real ssenari:

• Freelance — Upwork-də FastAPI + Next.js layihələr $30-80/saat aralığındadır
• Startup — Bakıda SAAS quran startuplar (məsələn, fintech sahəsində) bu stack-ə keçir
• Enterprise — Dövlət layihələrində belə Python backend tələbi artıb

---

Yekun

Bu məqalədə FastAPI ilə REST API qurub, Next.js ilə frontend-dən ona qoşuldun. Əlində artıq işlək bir full-stack boilerplate var. Bunu GitHub-a yüklə, portfolio-na əlavə et, və CV-ndə "FastAPI + Next.js ilə full-stack layihə qurmuşam" yaz.

Bakının developer bazarında fərqlənmək istəyirsənsə, sadəcə öyrənmə — qur, paylaş, göstər.

Sualın varsa, kommentlərdə yaz. Növbəti məqalədə bu layihəyə PostgreSQL + Docker əlavə edəcəyik. Stay tuned! 🚀

---

Müəllif: Baku Stack redaksiyası | 27 mart 2026