While it's common to use Server Actions within <form> elements, they can also be invoked with event handlers such as onClick. For example, to increment a like count.

'use client'
 
import { incrementLike } from './actions'
import { useState } from 'react'
 
export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)
 
  return (
    <>
      <p>Total Likes: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}

"use client";
import { testDiscord_action } from "@/lib/discord/discord.actions";

export default function DiscordButton() {
  return (
    <button
      className="discord-button"
      onClick={async () => {
        await testDiscord_action();
      }}
    >
      <span>Test Discord Action</span>
    </button>
  );
}

import {REST} from "@discordjs/rest";
import {Routes} from "discord-api-types/v10";

If you previously had @discordjs/builders, @discordjs/formatters, @discordjs/rest, or discord-api-types manually installed, it's highly recommended that you uninstall the packages to avoid package version conflicts.