Next.js ilə E-Government Portal: Praktiki Arxitektura Bələdçisi

Next.js ilə E-Government Portal: Praktiki Arxitektura Bələdçisi

Salam, developer dostlar! Bu gün Azərbaycanda ən çox tələb olunan, amma haqqında az danışılan mövzulardan birinə toxunacağıq: e-government (e-hökumət) portal arxitekturası. myGov.az, e-taxes.gov.az, ASAN Login kimi sistemlər gündəlik həyatımızın bir parçasıdır — bəs bunların arxasında nə dayanır?

Azərbaycanda dövlət IT layihələri üzrə developer tələbatı son 3 ildə ciddi artıb. Bakıdakı şirkətlər — Pasha Technology, AzInTelecom, CROCUSOFT, STP Group kimi komandalar aktiv şəkildə bu tip layihələr üzərində işləyir. Next.js bilən full-stack developer üçün maaş aralığı 1200-3500 AZN civarındadır, senior səviyyədə isə 4000-6000 AZN-ə qədər çıxa bilir. Yəni bu sahəni bilmək — real karyera investisiyasıdır.

---

Niyə Next.js?

E-government portalları üçün Next.js-in seçilməsinin konkret səbəbləri var:

• SSR (Server-Side Rendering): SEO və ilkin yüklənmə sürəti dövlət saytları üçün kritikdir. Vətəndaş Google-dan "vergi borcu yoxla" yazanda saytın indekslənməsi vacibdir.
• App Router & Server Components: Next.js 14/15-in App Router-i ilə server-side məntiq client bundle-ı şişirtmədən yazılır.
• API Routes: Ayrıca backend server qurmadan daxili API endpoint-lər yaradılır.
• Middleware: ASAN Login kimi SSO inteqrasiyası üçün request səviyyəsində autentifikasiya yoxlaması.
• i18n dəstəyi: Azərbaycan, rus, ingilis — çoxdilli dövlət portalları üçün vacibdir.

---

Layihə Strukturu: Real Arxitektura

Aşağıda e-government portal üçün təklif etdiyim App Router əsaslı folder strukturu var:

e-gov-portal/
├── app/
│   ├── (public)/
│   │   ├── page.tsx              # Ana səhifə
│   │   ├── services/
│   │   │   ├── page.tsx           # Xidmətlər siyahısı
│   │   │   └── [serviceId]/
│   │   │       └── page.tsx       # Tək xidmət səhifəsi
│   │   └── faq/page.tsx
│   ├── (auth)/
│   │   ├── login/page.tsx         # ASAN Login redirect
│   │   └── callback/page.tsx      # OAuth callback
│   ├── (dashboard)/
│   │   ├── layout.tsx             # Auth-protected layout
│   │   ├── profile/page.tsx       # Vətəndaş profili
│   │   ├── applications/
│   │   │   ├── page.tsx           # Müraciətlərim
│   │   │   └── [appId]/page.tsx   # Müraciət detalı
│   │   └── documents/page.tsx     # Sənədlərim
│   ├── api/
│   │   ├── auth/[...nextauth]/route.ts
│   │   ├── services/route.ts
│   │   └── applications/route.ts
│   ├── layout.tsx
│   └── middleware.ts
├── lib/
│   ├── asan-login.ts              # ASAN Login SDK wrapper
│   ├── db.ts                      # Prisma client
│   └── api-client.ts              # Backend API wrapper
├── components/
│   ├── ui/                        # Shared UI components
│   ├── forms/                     # Service application forms
│   └── layout/                    # Header, Footer, Sidebar
├── locales/
│   ├── az.json
│   ├── ru.json
│   └── en.json
└── prisma/
    └── schema.prisma

---

ASAN Login İnteqrasiyası: Middleware ilə Auth

Azərbaycanda e-gov layihələrin əksəriyyəti ASAN Login (OAuth 2.0 əsaslı) istifadə edir. Next.js middleware ilə bu inteqrasiyanı belə edirik:

typescriptKopyala
// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { verifyAsanToken } from '@/lib/asan-login';

const protectedPaths = ['/profile', '/applications', '/documents'];

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const isProtected = protectedPaths.some((path) =>
    pathname.startsWith(path)
  );

  if (!isProtected) return NextResponse.next();

  const token = request.cookies.get('asan_session')?.value;

  if (!token) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('redirect', pathname);
    return NextResponse.redirect(loginUrl);
  }

  try {
    const user = await verifyAsanToken(token);
    const headers = new Headers(request.headers);
    headers.set('x-user-id', user.fin);  // FİN kod
    headers.set('x-user-name', user.fullName);
    return NextResponse.next({ headers });
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

export const config = {
  matcher: ['/profile/:path*', '/applications/:path*', '/documents/:path*'],
};

---

Server Component ilə Xidmətlər Səhifəsi

Server Components sayəsində data fetch etmə client-ə yük olmadan baş verir:

typescriptKopyala
// app/(public)/services/page.tsx
import { getServices } from '@/lib/api-client';
import { ServiceCard } from '@/components/ui/ServiceCard';

export const metadata = {
  title: 'Elektron Xidmətlər | E-Gov Portal',
  description: 'Dövlət xidmətlərinə onlayn müraciət edin',
};

export default async function ServicesPage() {
  const services = await getServices({
    status: 'active',
    locale: 'az',
  });

  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Elektron Xidmətlər</h1>
      <p className="text-muted-foreground mb-8">
        {services.length} aktiv xidmət mövcuddur
      </p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {services.map((service) => (
          <ServiceCard key={service.id} service={service} />
        ))}
      </div>
    </main>
  );
}

---

Texnoloji Stack Tövsiyəsi

Bu tip layihə üçün tam stack belə görünür:

---

Performans və Təhlükəsizlik: Dövlət Standartları

E-gov layihələrdə adi SaaS-dan fərqli olaraq təhlükəsizlik auditi tələb olunur. Bəzi praktiki tövsiyələr:

• Rate Limiting: API route-larda upstash/ratelimit istifadə edin. Bir IP-dən dəqiqədə 30-dan çox sorğu bloklanmalıdır.
• Input Validation: zod ilə hər form input-u server tərəfdə validate edin. Client-side validation kifayət deyil.
• CORS & CSP Headers: next.config.js-də ciddi Content Security Policy yazın.
• Data Encryption: Şəxsi məlumatlar (FİN, doğum tarixi) database-də encrypt olunmalıdır. @prisma/client extension ilə field-level encryption mümkündür.
• Audit Log: Hər əməliyyat — giriş, müraciət, sənəd yükləmə — loglanmalıdır.

Statistika olaraq, CERT.GOV.AZ 2025-ci ildə dövlət saytlarına 12,000-dən çox kiberhücum cəhdi qeydə alıb. Yəni təhlükəsizlik — "sonra edərik" mövzusu deyil.

---

Çoxdillilik (i18n) — Azərbaycan Reallığı

Dövlət portalları minimum AZ/EN/RU dəstəkləməlidir. Next.js-də next-intl kitabxanası ilə bu sadədir:

typescriptKopyala
// locales/az.json
{
  "services": {
    "title": "Elektron Xidmətlər",
    "apply": "Müraciət et",
    "status": {
      "pending": "Gözləmədə",
      "approved": "Təsdiqlənib",
      "rejected": "Rədd edilib"
    }
  }
}

App Router ilə [locale] dynamic segment istifadə edərək /az/services, /en/services kimi URL-lər yaradılır.

---

Yekun Tövsiyələr

1. Kiçik başlayın: Bir xidmət modulu (məsələn, arayış sifarişi) ilə MVP qurun.
2. ASAN Login inteqrasiyasını erkən edin: Bu, layihənin ən çox vaxt aparan hissəsidir.
3. Accessibility (a11y) unutmayın: Dövlət saytları WCAG 2.1 AA standartına cavab verməlidir.
4. Monorepo düşünün: Turborepo ilə admin panel və vətəndaş portalını eyni repo-da idarə edin.

Bu sahə Azərbaycanda real işdir, real maaşdır. Dövlət rəqəmsallaşma strategiyasına görə 2027-yə qədər bütün dövlət xidmətlərinin 90%-i onlayn olmalıdır. Bu o deməkdir ki, developer tələbatı daha da artacaq.

Git repo-nuzu açın, npx create-next-app@latest e-gov-portal --typescript yazın və başlayın. Suallarınız varsa, şərhlərdə gözləyirəm! 🚀

---

Baku Stack — Azərbaycan developer icması üçün.