onSuccess Method Returns Undefined Data in Next.js v14 with next-safe-action v7?

[7codo]

I am experiencing an issue where the onSuccess method's data is always empty, even though the returning result from useAction hook. I am using Next.js version 14 with next-safe-action version 7.

Code Snippet

//server action function
export const createSwipeSource = authActionClient
  .schema(NewSwipeSourceSchema)
  .action(async ({ parsedInput, ctx }) => {
    const newSwipeSource = {
      ...parsedInput,
      userId: parsedInput.userId ?? ctx.userId,
    };

    const [insertedSwipeSource] = await db
      .insert(swipeSources)
      .values(newSwipeSource)
      .returning();

    return { success: true, data: insertedSwipeSource };
  });

//use the server action function
const { execute, status, executeAsync, reset, isExecuting, result } = useAction(
  createSwipeSource,
  {
    onExecute: ({ input }) => {
      console.log("executing");
    },
    onSuccess: ({ data, input }) => {
      console.log("success", data);
      toast({
        title: "Success",
        description: "Swipe source created successfully!",
        variant: "success",
      });
    },
    onError: ({ error, input }) => {
      console.log("error", error);
      toast({
        title: "Error",
        description: "Failed to create swipe source. Please try again.",
        variant: "destructive",
      });
    },
    onSettled: ({ result, input }) => {
      console.log("settled");
      setOpen(false);
    },
  }
);

//safe action client and middleware
export const authActionClient = createSafeActionClient({
  defaultValidationErrorsShape: "flattened",
}).use(async ({ next }) => {
  const session = await auth();
  const userId = session?.user?.id;

  if (!userId) {
    throw new Error("Session is not valid!");
  }

  return next({ ctx: { userId } });
});

Expected Behavior

The onSuccess method should receive the data returned from the server action { success: true, data: insertedSwipeSource }.

Actual Behavior

The onSuccess method's data is always undefined.

I am using

• Next.js version: 14
• next-safe-action version: 7

Debugging Steps Taken

1. Verified that the data is correctly returned from the server action.
2. Checked the middleware to ensure it is passing the context correctly.
3. Added console logs to debug the server action and client-side handling.

[TheEdoRan]

Hi, can you please provide a link to a minimal reproduction of the issue? Thanks.

[7codo]

Thank you for your response! I was able to solve the issue by adjusting the Next.js middleware configuration. Initially, I was setting the headers like this:

return NextResponse.next({
  headers
});

However, I realized the correct approach is:

return NextResponse.next({
  request: {
    headers,
  },
});

This change resolved the problem.

[TheEdoRan]

Great!