DEV Community

Cover image for NextJS Discord Bot | Create and host a bot for free.
mmvergara
mmvergara

Posted on

10 1 1 1 1

NextJS Discord Bot | Create and host a bot for free.

Nextjs Discord Bot... for free? Yes! we can actually create one using nextjs and host it for free in vercel! I made a template to make the process much easier!

๐Ÿš€ Github Template Repository

๐Ÿš€ Invite the bot to your discord

Easy Command building

This template wants you to just focus on making commands and we will do the rest. how you can easily create one.



import { SlashCommandBuilder } from "@discordjs/builders";
import { executeCommand } from "@/types";

// to add a command go to ./commands folder and create a new ts file

// the command title/name should match the command.ts file for
//      ex. for tutorialhere command you should name the file tutorialhere.ts

// Don't change register and execute variable names
export const register = new SlashCommandBuilder()
  .setName("tutorialhere")
  .setDescription("description of your command");

export const execute: executeCommand = async (interaction) => {
  // You have access to do interaction object
  // https://discord.com/developers/docs/interactions/receiving-and-responding#interaction-object

  // Do your bot logic here
  // You can even connect to a database

  // you should return a APIInteractionResponse
  // https://discord-api-types.dev/api/discord-api-types-v10#APIApplicationCommandInteraction
  return {
    type: 4,
    data: {
      content: `Hello World! ${interaction.member?.user.username}`,
    },
  };
};


Enter fullscreen mode Exit fullscreen mode

thats it?! YEP simple as that, easy peasy

How it works ๐Ÿ”Ž

A discord bot like this is possible because of the discord API, TLDR its just a normal http communication and our response just need to be a json format of type APIInteractionResponse and then the bot will respond!

Given all of the simplicity on how it works, there are still few things we need to take care of like, body parsing, interaction, registering the commands, verifying request, creating commands, typing system.

This boilerplate does it all for you so you can just focus on making commands and will take care of the underlying stuff so you can register and .

Limitations ๐Ÿฃ

As you might have guessed, this Discord bot cannot listen for messages or other events in the server and is likely restricted to handling slash commands only.

Future Plans?

Edge support, its very doable!

GitHub logo mmvergara / nextjs-discord-bot-boilerplate

A Nextjs Discord Bot Template that easily allows you to add and manage discord slash commands. ๐Ÿš€

NextJS Discord Bot

๐Ÿค– Invite this Bot to your server
๐Ÿ“š Documentation

Yes, free fully functional rest-api discord bot ๐Ÿค– can be made using nextjs ๐Ÿคฏ ๐Ÿš€

I have done all of the abstraction for you, so you can focus on building your bot ๐Ÿ› ๏ธ

  • โœ… Easy Command Building
  • โœ… Easy Command Registration
  • โœ… Easy Deployment

Getting Started

1. Installation

NEXT_PUBLIC_APPLICATION_ID=
PUBLIC_KEY=
BOT_TOKEN=


# Custom secret key to register your commands
REGISTER_COMMANDS_KEY=
Enter fullscreen mode Exit fullscreen mode

2. Adding your own Slash Commands

  • Just go to ./commands/tutorialhere.ts after cloning and you will see the template for creating a command

3. Deploy

  • Since this is a nextjs project, you can deploy it to vercel for free

4. Add Interaction Endpoint

After deploying you will have your url

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
mikka profile image
Mikka โ€ข

I had an idea like this a while back, very interesting to see you beat me to it.

Collapse
 
mmvergara profile image
mmvergara โ€ข

Hope it meets your standards <3

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay