Во Next.js (особено кога го користите App Router), постојат два популарни начини за извршување логика на серверот: Route API (фајл route.ts во /app/api/...) и Server Actions. И двата работат на серверска страна, но нивната главна намена е различна.

Што е Route API?

Route API (Route Handler) е начин да креирате API endpoint директно во вашиот Next.js проект. Со ова можете да имате URL како /api/users кој прима GET/POST/PUT/DELETE барања и враќа JSON. Главната предност е тоа што имате јасен API договор (request/response) и endpoint-от може да се повика од каде било: друга веб-апликација, мобилна апликација или надворешна интеграција.

Пример: Route API (едноставен)

Да речеме дека правиме endpoint за креирање корисник:

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const body = await request.json();
  const { name, email } = body;

  if (!name || !email) {
    return NextResponse.json(
      { message: "Името и е-поштата се задолжителни" },
      { status: 400 }
    );
  }

  // пример: зачувај во база
  await prisma.user.create({ data: { name, email } });

  return NextResponse.json(
    { message: "Корисникот е успешно креиран" },
    { status: 201 }
  );
}

Потоа го повикуваме од каде било (вклучително и од client component):

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Мартин", email: "[email protected]" }),
});

Кога да користите Route API?

Route API е најдобар избор кога ви треба endpoint кој стои самостојно и не се користи само од вашите Next.js страници. На пример, кога апликацијата треба да опслужува барања од мобилни апликации (Android/iOS), од одвоен frontend, или кога треба да обезбедите endpoint за интеграција со трети страни: како webhook за плаќања или callback од надворешен сервис.

Што е Server Actions?

Server Actions е начин да извршите функција на серверот која се повикува директно од React форма или акција. Логиката е „залепена” блиску до компонентата, па работниот тек со форми станува многу поедноставен (не мора да правите посебен API endpoint само за да испратите форма интерно).

Пример: Server Actions (едноставен)

Да направиме форма за ажурирање на профил, која по успешно зачувување прави пренасочување:

"use server";

import { redirect } from "next/navigation";

export async function updateProfileAction(formData: FormData) {
  const name = String(formData.get("name") || "");
  const email = String(formData.get("email") || "");

  if (!name || !email) {
    return { error: "Името и е-поштата се задолжителни" };
  }

  // пример: зачувај во база
  // await prisma.user.update({ where: { id }, data: { name, email } });

  redirect("/dashboard");
}

Го користиме во компонентата вака:

import { updateProfileAction } from "@/app/actions/update-profile";

export default function ProfilePage() {
  return (
    <form action={updateProfileAction} className="space-y-3">
      <input name="name" placeholder="Име" className="border p-2 w-full" />
      <input name="email" placeholder="Е-пошта" className="border p-2 w-full" />

      <button className="bg-blue-600 text-white px-4 py-2 rounded">
        Зачувај
      </button>
    </form>
  );
}

Кога да користите Server Actions?

Server Actions се најдобар избор кога функционалноста е чисто интерна и се користи само од страниците на вашата Next.js апликација, како на пример, dashboard или админ панел. Типичниот тек е едноставен: корисникот ја испраќа формата, податоците се валидираат на серверот, се зачувуваат во базата, и резултатот веднаш се враќа во UI, било како порака за грешка или како пренасочување кон друга страница.

Краток преглед (за брза одлука)

• Ако ви треба endpoint кој може да се повика од надвор (мобилна апликација, webhook, интеграција), тогаш користете Route API.
• Ако ви треба акција блиска до UI-то (форма/копче во вашата Next.js апликација), во тој случај користете Server Actions.

Заклучок

Route API е идеален за градење „официјални” endpoint-и кои можат да бидат пристапени од повеќе клиенти, додека Server Actions е идеален за внатрешна логика која е поврзана со компонентите и го прави работниот тек со форми значително поедноставен. Двата пристапи не се конкуренти, тие се ист алат за различен контекст.

Добивај известувања

Најава

Извести ме за

нови коментаринови одговори на мои коментари

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Коментари

Најнови

Најстари Со највеќе гласови

Inline Feedbacks

View all comments