Server Actions | Next.js | Page 1

lavish plankBOT Jun 9, 2024, 2:52 AM

Hi @midnight kite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Based on the information provided in the knowledge sources, it appears that using Server Actions in Next.js does not produce network results in the browser console. This behavior is consistent with the nature of Server Actions, which are executed on the server side rather than making traditional client-side network requests.

Here are some relevant points from the knowledge sources:

Server Actions Latency:
- Server Actions incur a latency penalty compared to traditional fetch API endpoints (source (https://github.com/vercel/next.js/issues/53339)).
Error Handling in Server Actions:
- Errors in Server Actions are logged server-side, but the error digest is not logged (source (https://github.com/vercel/next.js/issues/60684)).

Given these points, it is expected that you won't see network requests in the browser console when using Server Actions, as these actions are handled server-side. This is different from traditional client-side API requests, which would appear in the network tab of the browser's developer tools.

If you need to debug or monitor these actions, you should look at the server logs where the actions are executed.

Here is a summary of your onSubmit function for context:

const onSubmit: SubmitHandler<FieldValues> = async (data) => {
  const { lat, lng } = location?.latlng || {};
  const slug = slugify(data.title, {
    lower: true,
    strict: true,
    replacement: '-',
  });
  const submissionData = {
    ...data,
    slug: slug,
    imageSrcKey: imageSrcKey,
    categories: selectedCategories.map((category) => category.label),
    location: location?.label,
    locationLat: lat,
    locationLng: lng,
    country: selectedCountry?.label,
    region: selectedCountry?.region,
  };

  setIsLoading(true);

  try {
    const event = await createEvent(submissionData);

const notificationsData = {
eventName: event.title,
eventImageUrl: event.imageSrc,
eventStatus: event.status,
eventId: event.id,
eventSlug: event.slug,
};
await createNotification({
userId: userData.id,
type: 'event_created',
data: notificationsData,
});
await sendEmail({
name: 'Event Creation Notification',
email: userData.email,
message: A new event has been created: ${event.title},
});
toast.success(
'Your event is submitted and awaiting admin approval',
toastStyle,
);
await revalidatePaths(process.env.NEXT_PUBLIC_REVALIDATION_SECRET || '');
resetAllStatesAndForm();
setIsPreviewMode(false);
createEventModal.onClose();
router.refresh();
} catch (error) {
toast.error('Something went wrong', toastStyle);
} finally {
setIsLoading(false);
}
};


For further details, you can refer to the **Next.js documentation** (<https://nextjs.org/docs>) or the specific issues mentioned in the knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#Server Actions