Next.js 14 Tutorial - Chapter 12 - Using forms with Server Actions - Submitting of the form not calling the server action

Question

I am on Chapter 12 of the official Next.js tutorial. Link here: https://nextjs.org/learn/dashboard-app/mutating-data

I ended up finishing the "3. Extract the data from formData" and I am unable to continue because clicking on the Submit button does nothing.

I have the actions.ts file like this:

'use server';
 
export async function createInvoice(formData: FormData) {
  const rawFormData = {
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  };
  // Test it out:
  console.log(rawFormData);
}

I have the create-form.tsx file like this:

'use client';
...
import { createInvoice } from '@/app/lib/actions';
 
export default function Form({
  customers,
}: {
  customers: CustomerField[];
}) {

  return (
    <form action={createInvoice}>
    ...
        <Button type="submit">Create Invoice</Button>
    ...  
    </form>

When I click on the button, nothing happens & no error anywhere.

Whats wrong with this? Does anybody see the reason why the action is not called on submit?

What I already tried:

• I removed the action and implemented onSubmit on the form to confirm that the actual submit works
• I put simple function in the action to confirm that the "client behavior" works just fine as well
• I tried clearing cache etc. to exclude browser issues

I even created fresh clean new project to make the exact same easy scenario, and it IS NOT WORKIGN neither. What am I doing wrong?

Answer 1

So I found the problem and it is soooo embarrassing that I will share. And of course it will help those of you who were not seeing it like me.

The code works fine, but the reason why I was not seeing anything in the console ("Handling form.") is obvious: the action is server side ("use server") so I will never see anything in browser's console.

I need to take a look in the terminal (cmd where I ran npm start) because the is the place where server logs are logged in.

And of course, my logs are there so the action was working the whole time.

Kill me now.