How to use discord.js in Nextjs app dir

import { getServerAuthStatus } from "@/lib/session";
import { z } from "zod";
import { giveRole } from "./actions";

export default async function Home() {
  const session = await getServerAuthStatus();
  console.log(session);

  async function handleSubmit(values: FormData) {
    "use server";

    const name = z.string().parse(values.get("name"));
    if (name) {
      console.log(name);
      await giveRole(name);
    }
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        {JSON.stringify(session)}

        <form action={handleSubmit}>
          <input type="text" name="name" />
          <button type="submit">Submit</button>
        </form>
      </div>
    </main>
  );
}

"use server";

import { Client, GatewayIntentBits } from "discord.js";
import { config } from "@/lib/config";

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.on("ready", () => {
  console.log(`Bot logged in!`);
});

client.login(config.DISCORD_BOT_TOKEN);

export const giveRole = async (name: string) => {
  const user = client.users.cache.find(
    (user) => user.username.toLowerCase() === name.toLowerCase()
  );
  const guild = client.guilds.cache.get(config.DISCORD_SERVER_ID);
  const role = guild?.roles.cache.find(
    (role) => role.id === config.DISCORD_ROLE_ID
  );

  if (user && guild && role) {
    const member = guild.members.cache.get(user.id);
    if (member) {
      await member.roles.add(role);
    }
  }
};