DEV Community

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

Posted on

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

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