Make a folder called api in the app dir

The folder structure defines your routes so /api/users will be a user's folder in the api folder

Your main file is route.ts file, the functions you can export are you methods... So POST, GET etc

No comments from me except that server actions allow anything - create, read, update, delete, etc. Not just create

So I should call the route handlers from the form instead of using server actions?

No need

They both can do everything

They can access cookies, headers etc

Server actions are good cause they are pretty much just functions soo type safety and autocomplete

They also are built for forms so you can get formData easily and loading states




Api routes are versatile and can be used from anywhere for anything.. even stuff which you don't want to use next for. Like a popular YouTuber theo showed him using next api routes for his projects not on next.

I tried route handlers for editing but it’s not showing me the new edited data

RevalidatePath

I tried that already both in the submit function and in the route handler

Send you code

Also try to export const dynamic

Set it to force dyanmic

You need to paste the code here

And the specific stuff which is causing the issues

@Birman if your questions have been solved please make the answer

Last para

import { NextRequest } from "next/server";
import { revalidateTag } from "next/cache";

export async function GET(request: NextRequest) {
const res = await fetch("http://server:5001/api/accounts");

const data = await res.json();

return Response.json({ data });
}

export async function POST(request: NextRequest) {
const tag = request.nextUrl.searchParams.get("accounts");
const data = await request.json();

const res = await fetch("http://server:5001/api/accounts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});

revalidateTag(tag as string);

return Response.json(res);
}

export async function PUT(request: NextRequest) {
const tag = request.nextUrl.searchParams.get("tag");
const { searchParams } = new URL(request.url);
const account_id = searchParams.get("account_id");

if (!account_id) {
return Response.json({
error: "Missing required query parameters",
});
}

const data = await request.json();

const res = await fetch(http://server:5001/api/accounts/${account_id}, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});

revalidateTag(tag as string);

return Response.json(res);
}

export async function DELETE(request: NextRequest) {
const tag = request.nextUrl.searchParams.get("tag");
const { searchParams } = new URL(request.url);
const account_id = searchParams.get("account_id");

if (!account_id) {
return Response.json({
error: "Missing required query parameters",
});
}

const res = await fetch(http://server:5001/api/accounts/${account_id}, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});

revalidateTag(tag as string);

return Response.json(res);
}

What's the issue?

I have to refresh the whole page to see the updated data

.

So I should use revalidatePath instead of revalidateTag?

I tried both just now and it doesn’t work. I even tried refreshing the page and it’s not showing me the updated data.

It says static generation store missing