{"id":21895211,"url":"https://github.com/rot4tion/nextjs-discord-bot-template","last_synced_at":"2026-04-11T11:04:11.233Z","repository":{"id":202697162,"uuid":"707945879","full_name":"Rot4tion/nextjs-discord-bot-template","owner":"Rot4tion","description":"A Nextjs Template setup free host on Vercel that easily allows you to add and manage discord interaction: slash commands, autocomplete, components, modal submit,...","archived":false,"fork":false,"pushed_at":"2023-10-26T14:11:30.000Z","size":4776,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-03T05:49:45.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nextjs-discord-bot-template.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rot4tion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-21T03:57:51.000Z","updated_at":"2024-03-31T14:29:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"d48ac29e-02e9-4cbf-9541-934a7dd94a0b","html_url":"https://github.com/Rot4tion/nextjs-discord-bot-template","commit_stats":null,"previous_names":["rot4tion/nextjs-discord-bot-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rot4tion%2Fnextjs-discord-bot-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rot4tion%2Fnextjs-discord-bot-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rot4tion%2Fnextjs-discord-bot-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rot4tion%2Fnextjs-discord-bot-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rot4tion","download_url":"https://codeload.github.com/Rot4tion/nextjs-discord-bot-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244904348,"owners_count":20529420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T13:32:23.294Z","updated_at":"2026-04-11T11:04:11.204Z","avatar_url":"https://github.com/Rot4tion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Developed based on original source code: https://github.com/jzxhuang/nextjs-discord-bot\n# NextBot: Next.js Discord Bot Template\n\nNextBot is a template for building and deploying a Discord bot with Next.js. It uses Discord interactions webhooks to receive and reply to commands.\n\n![Demo GIF](docs/demo.gif)\n- Free \u0026 easy to deploy: Deploy to [Vercel](https://vercel.com/) in seconds at no cost. No need to host a server or VM to run your bot! Don't\n  bother with Heroku, EC2, etc.\n- Easy to extend: Since the bot is built on Next.js, you can easily build an accompanying webapp in the same repo.\n## Features\n* ✅ Dynamic load commands\n* 🔥 Slash commands (supports auto complete!)\n* 👮‍♂️ Command,autocomplete,components,modal submit permissions\n## Using Library and Framework\n* [Typescript](https://www.typescriptlang.org/)\n* [Tailwind CSS ](https://tailwindcss.com/)\n* [discord-api-types](https://discord-api-types.dev/api/discord-api-types-v10/)\n* [@discordjs/rest](https://www.npmjs.com/package/@discordjs/rest)\n* [@discordjs/formatters](https://discordjs.guide/popular-topics/formatters.html#basic-markdown)\n## Try it out\n\nJoin https://discord.gg/68RTn73yeZ to try out a demo of NextBot. Type one of these slash commands into the general\nchannel\n## Example command\n- `/ping`\n- `/invite`\n- `/avatar`\n- `/clear` (Example default member permissions)\n- `/random_pic` (Option)\n- `/server` (Example using rest discordClient)\n- `/send_message` (Options, discordClient send message)\n- `/animal_action` (Autocomplete)\n- `/modal_example` (Modal submit)\n- `/components_example` (Example all components interaction)\n- `/private_command` (Example disable command, it not able to use and register to discord)\n- `/test` (Developer permission)\n- I will update with more example commands\n\n\u003c!-- Or add NextBot to your own server with this link:\nhttps://discord.com/api/oauth2/authorize?client_id=837427503059435530\u0026permissions=2147485696\u0026scope=bot%20applications.commands --\u003e\n\nYou can also send slash commands through DM to the bot as long as you're in a mutual server with the it!\n\n## File Structure\n- `src/handle_interactions/commands/\u003ccommnad_name\u003e.ts`: Create your command here with the filename being the name of your command. (Use the `yarn register-commands` command to register your new command).\n\n- `src/handle_interactions/autocomplete/\u003cyour_command_name\u003e/\u003coption autocomplete name\u003e.ts`: Create your autocomplete handler, look at **animal_action** command that is the example for autocomplete.\n\n- `src/handle_interactions/components/\u003ccomponent_type\u003e/\u003ccomponent_custom_id\u003e.ts`: Create your component handler here with the following structure.\n\n- `src/handle_interactions/modal_submit/\u003cmodal_custom_id\u003e.ts`:Create your modal submit handler\n\n- `src/app/api/interactions/route.ts`: This is the main route handler for the Interactions Endpoint. It receives interactions from Discord and handles them accordingly.\n\n- `src/discord/verify-incoming-request.ts`: Helper functions to verify incoming requests from Discord, as outlined in https://discord.com/developers/docs/interactions/receiving-and-responding#security-and-authorization.\n\n- `src/app/page.tsx`: A basic web page. This could be your admin portal or whatever you'd like!\n\n## Development\n\nNode.js 18+ is required.\n\n### Setup\n\n- Clone the repo. This is a\n  [template repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)\n  so you can click the green \"Use this template\" button on GitHub to create your own repo!\n  - Run `yarn` to install dependencies.\n- [Create a new Discord application](https://discord.com/developers/applications).\n  - In the `Bot` settings of your Discord application, enable the `Message Content` intent.\n- Fill out environment variables:\n  - In the root of the repository, copy `.env.local.example` into a new file `.env.local`. Fill out the values using the\n    real values from your Discord app.\n- Register some slash commands for your bot. I've included a script to register the commands included in the demo bot.\n  - Run `yarn register-commands` to execute the script! You only need to run this once, unless you add new commands.\n  - You can learn more about registering commands in the\n    [Discord API docs](https://discord.com/developers/docs/interactions/application-commands#create-global-application-command)\n\n### Local Development\n\nOnce you've completed the setup steps above, you're ready to run the bot locally!\n[![Nextjs Discord Bot Template Local Setup](https://img.youtube.com/vi/FabR8EZOMS0/0.jpg)](https://www.youtube.com/watch?v=FabR8EZOMS0)\nDiscord can only send events to a public `https` address. You'll need an HTTP tunneling service like\n[ngrok](https://ngrok.com/) or [Cloudflare Tunnel](https://www.cloudflare.com/products/tunnel/) when developing locally.\nFor this guide, I'll be using ngrok.\n\n- Run `yarn dev` to start the Next.js application.\n- Assuming you're using ngrok, run `ngrok http 3000` to start your HTTP tunnel.\n- In the Discord app settings, set `Interactions Endpoint URL` to `\u003cYOUR_PUBLIC_TUNNELED_NGROK_URL\u003e/api/interactions`.\n  Make sure to use the `https` URL!\n- Save changes in the Discord app settings.\n\nIn order to verify your interactions endpoint URL, Discord will send a `PING` message to your bot, and the bot should\nreply with a PONG (see `src/app/api/interactions.ts`). If this is successful, your bot is ready to go!\n\nYou can now add your bot to your Discord server and try it out! Use Discord's URL generator in `OAuth2 -\u003e URL Generator`\nof your Discord app's settings to generate an invite link. Make sure to select:\n\n- `bot` + `applications.commands` for scopes\n- `Send Messages` + `Use Slash Commands` for bot permissions\n\nAfter adding the bot to a server, try out one of the slash commands like `/ping` or `random_pic`!\n\n- You can try modifying the response of the `/ping` command and the changes should be reflected immediately.\n- You're ready to add your own commands!\n\nNote: whenever you terminate/restart your ngrok tunnel, you'll need to update the `Interactions Endpoint URL` in the\nDiscord app settings accordingly.\n\n## Deploy to Production\n\nThis project is designed to be deployed on Vercel. I recommend that you create a new Discord Application for production!\nHere are some things you should remember to do when deploying:\n\n- Set the environment variables in Vercel accordingly.\n- You can still use `yarn register-commands` to register commands for your production bot, as long as you update your\n  `.env.local` file with the correct values.\n- You should set `\u003cYOUR_VERCEL_URL\u003e/api/interactions` as the `Interactions Endpoint URL` in your prod Discord app.\n\n## How It Works\n\nUnlike traditional Discord bots which maintain a persistent connection with Discord (and thus require managing your own\nservers), NextBot uses Discord's\n[Interactions Endpoint](https://discord.com/developers/docs/interactions/slash-commands#receiving-an-interaction) to\nrespond to interactions (such as slash commands).\n\nThe Interactions Endpoint is now Discord's recommended approach to building bots. If you haven't already, I recommend\nyou read the [Getting Started](https://discord.com/developers/docs/getting-started) and\n[Receiving and Responding](https://discord.com/developers/docs/interactions/receiving-and-responding) pages of Discord's\ndocumentation to learn more about Interactions, Slash Commands, and Discord bots!\n\nAnd be sure to check out the rest of the Discord docs to see all the awesome stuff you can do aside from basic Slash\ncommands!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frot4tion%2Fnextjs-discord-bot-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frot4tion%2Fnextjs-discord-bot-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frot4tion%2Fnextjs-discord-bot-template/lists"}