Alternative solutions example of not using server actions in Next.js?

Instead of using server actions, you can use API routes to handle form submissions or data processing. Here's an example:

// app/api/submitForm/route.js
export async function POST(request) {
  const formData = await request.formData();
  const name = formData.get("name");
  console.log("Form submitted with name:", name);
  return new Response(JSON.stringify({ success: true }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

You can then call this API route from a client-side component:

// app/form/page.js
export default function FormPage() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const response = await fetch("/api/submitForm", {
      method: "POST",
      body: formData,
    });
    const result = await response.json();
    console.log(result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}