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}`,
    },
  };
};

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!

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

• Clone Repository
• Fill out environment variables
  • you can get these on your Discord > Developer > Application

NEXT_PUBLIC_APPLICATION_ID=
PUBLIC_KEY=
BOT_TOKEN=


# Custom secret key to register your commands
REGISTER_COMMANDS_KEY=

2. Adding your own Slash Commands

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

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

• goto https://discord.com/developers/applications

• then scroll to…

View on GitHub

Comments

[Mikka]

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

[mmvergara]

Hope it meets your standards <3