Merge pull request #1 from jzxhuang/next-13-edge-app-router

migrate to Next.js 13

Author: jzxhuang

.env.local.example

@@ -1,4 +1,9 @@
 # You should copy this file into `.env.local` and fill out the values appropriately
+
+# Settings -> General Information
 DISCORD_APP_ID=
 DISCORD_APP_PUBLIC_KEY=
+
+# Settings -> Bot
+# Required to register commands, not required to actually run the bot
 DISCORD_BOT_TOKEN=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.prettierrc

@@ -7,5 +7,9 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
 }

README.md

@@ -1,87 +1,129 @@
-# NextBot: Serverless Discord Bot with Next.js
+# NextBot: Next.js Discord Bot Template that runs in the Edge Runtime
 
-Serverless Discord bot using Discord's
-[slash commands webhook](https://discord.com/developers/docs/interactions/slash-commands#receiving-an-interaction) and
-[Next.js](https://nextjs.org/).
+NextBot is a template for building and deploying a Discord bot with Next.js. It runs 100% in the edge runtime so you get
+lightning-fast responses and zero cold starts. It uses Discord interactions webhooks to receive and reply to commands.
 
 ![Demo GIF](docs/demo.gif)
 
-## Try it out
+- Runs at the edge: Lightning-fast responses, no cold start.
+- Free & easy to deploy: Deploy to Vercel in seconds at no cost. No need to host a server or VM to run your bot! Don't
+  bother with Heroku, EC2, etc.
+- Easy to extend: Since the bot is built on Next.js, you can easily build an accompanying webapp in the same repo.
 
-[![Discord Invite](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/NmXuqGgkb3)
+## Try it out
 
-Join https://discord.gg/NmXuqGgkb3 and use one of the available slash commands.
+Join https://discord.gg/NmXuqGgkb3 to try out a demo of NextBot. Type one of these slash commands into the general
+channel:
 
 - `/ping`
+- `/invite`
 - `/randompic`
 
-Or, add NextBot to your own server:
-https://discord.com/api/oauth2/authorize?client_id=837427503059435530&permissions=2147483648&scope=bot%20applications.commands
-
-You can also send slash commands through DM the bot once you're in a mutual server with the bot!
+Or add NextBot to your own server with this link:
+https://discord.com/api/oauth2/authorize?client_id=837427503059435530&permissions=2147485696&scope=bot%20applications.commands
 
-An accompanying static web app also shows the registered commands: https://nextjs-discord-bot.vercel.app/
-
-## Technologies
-
-- Receives slash commands through
-  [Discord's Interaction webhook](https://discord.com/developers/docs/interactions/slash-commands#receiving-an-interaction),
-  allowing for a completely serverless approach!
-- Built on Next.js: easily build an accompanying dashboard web app in the same repo and call your API directly with SSR!
-- Typescript <3 (thanks to https://github.com/discordjs/discord-api-types for Discord types!)
+You can also send slash commands through DM to the bot as long as you're in a mutual server with the it!
 
 ## Development
 
-Requires a Node.js version that can run Next.js.
+Node.js 18+ is required.
 
 ### Setup
 
-Follow the one-time setup as follows:
-
-- Clone the repo
-- Create a Discord app and bot
-- Copy `.env.local.example` into a new file `.env.local` and fill in the blanks with the values from your Discord app
-- Register the slash commands. You can learn more about registering commands in the
-  [Discord API docs](https://discord.com/developers/docs/interactions/slash-commands#registering-a-command). I created
-  the commands by leveraging `createGlobalCommand` in `services/discord.ts`. I added this to`getServerSideProps` in
-  `pages/index.tsx` and ran it ONCE (i.e. refresh the page ONCE).
-
-```tsx
-await createGlobalCommand({
-  name: "randompic",
-  description: "Get a random picture",
-  options: [
-    {
-      name: "type",
-      description: "What type of picture would you like?",
-      type: 3,
-      required: true,
-      choices: [
-        { name: "cat", value: "cat" },
-        { name: "dog", value: "dog" },
-        { name: "generic", value: "picsum" },
-      ],
-    },
-  ],
-})
-
-await createGlobalCommand({
-  name: "ping",
-  description: "Ping pong! I'll respond with pong.",
-})
-```
-
-You could also make the request via Postman, curl, etc. but I'm lazy
+- Clone the repo. This is a
+  [template repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)
+  so you can click the green "Use this template" button on GitHub to create your own repo!
+  - Run `yarn` to install dependencies.
+- [Create a new Discord application](https://discord.com/developers/applications).
+  - In the `Bot` settings of your Discord application, enable the `Message Content` intent.
+- Fill out environment variables:
+  - In the root of the repository, copy `.env.local.example` into a new file `.env.local`. Fill out the values using the
+    real values from your Discord app.
+- Register some slash commands for your bot. I've included a script to register the commands included in the demo bot.
+  - Run `yarn register-commands` to execute the script! You only need to run this once, unless you add new commands.
+  - You can learn more about registering commands in the
+    [Discord API docs](https://discord.com/developers/docs/interactions/application-commands#create-global-application-command)
 
 ### Local Development
 
-- Run `yarn dev`
-- Tunnel your localhost:3000 with a tool like [ngrok](https://ngrok.com/). `ngrok http 3000`
-- Add the `<YOUR_PUBLIC_TUNNELED_NGROK_URL>/api/interactions` as the `Interactions Endpoint URL` in your Discord app.
-- Add the app to a server and slide in its DMs! Your registered slash commands should be available now.
+Once you've completed the setup steps above, you're ready to run the bot locally!
+
+Discord can only send events to a public `https` address. You'll need an HTTP tunneling service like
+[ngrok](https://ngrok.com/) or [Cloudflare Tunnel](https://www.cloudflare.com/products/tunnel/) when developing locally.
+For this guide, I'll be using ngrok.
+
+- Run `yarn dev` to start the Next.js application.
+- Assuming you're using ngrok, run `ngrok http 3000` to start your HTTP tunnel.
+- In the Discord app settings, set `Interactions Endpoint URL` to `<YOUR_PUBLIC_TUNNELED_NGROK_URL>/api/interactions`.
+  Make sure to use the `https` URL!
+- Save changes in the Discord app settings.
+
+In order to verify your interactions endpoint URL, Discord will send a `PING` message to your bot, and the bot should
+reply with a PONG (see `src/pages/api/interactions.ts`). If this is successful, your bot is ready to go!
+
+You can now add your bot to your Discord server and try it out! Use Discord's URL generator in `OAuth2 -> URL Generator`
+of your Discord app's settings to generate an invite link. Make sure to select:
+
+- `bot` + `applications.commands` for scopes
+- `Send Messages` + `Use Slash Commands` for bot permissions
+
+After adding the bot to a server, try out one of the slash commands like `/ping` or `randompic`!
+
+- You can try modifying the response of the `/ping` command and the changes should be reflected immediately.
+- You're ready to add your own commands!
+
+Note: whenever you terminate/restart your ngrok tunnel, you'll need to update the `Interactions Endpoint URL` in the
+Discord app settings accordingly.
+
+## Deploy to Production
+
+This project is designed to be deployed on Vercel. I recommend that you create a new Discord Application for production!
+Here are some things you should remember to do when deploying:
+
+- Set the environment variables in Vercel accordingly.
+- You can still use `yarn register-commands` to register commands for your production bot, as long as you update your
+  `.env.local` file with the correct values.
+- You should set `<YOUR_VERCEL_URL>/api/interactions` as the `Interactions Endpoint URL` in your prod Discord app.
+
+## How It Works
+
+Unlike traditional Discord bots which maintain a persistent connection with Discord (and thus require managing your own
+servers), NextBot uses Discord's
+[Interactions Endpoint](https://discord.com/developers/docs/interactions/slash-commands#receiving-an-interaction) to
+respond to interactions (such as slash commands).
+
+The Interactions Endpoint is now Discord's recommended approach to building bots. If you haven't already, I recommend
+you read the [Getting Started](https://discord.com/developers/docs/getting-started) and
+[Receiving and Responding](https://discord.com/developers/docs/interactions/receiving-and-responding) pages of Discord's
+documentation to learn more about Interactions, Slash Commands, and Discord bots!
+
+And be sure to check out the rest of the Discord docs to see all the awesome stuff you can do aside from basic Slash
+commands!
+
+### File Structure
+
+- `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.
+- `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.
+- `src/app/page.tsx`: A basic web page. This could be your admin portal or whatever you'd like!
+
+## Why Next.js (instead of Express, serverless, or Cloudflare Workers)?
+
+NextBot leverages Next.js 13
+[Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) to receive and respond to
+interactions. But why Next.js instead of something like Express or serverless (AWS Lambda)?
 
-### Deploy on Vercel
+- Next.js is free and effortless to deploy on Vercel. Don't bother with trying to host your Express server
+- Compared to serverless, edge is faster (no cold start) and cheaper (Edge Runtimes have more generous free tiers and
+  are cheaper per request)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fjzxhuang%2Fnextjs-discord-bot)
+A better comparison would be hosting a Discord bot on Cloudflare Workers, as shown in this
+[official Discord tutorial](https://discord.com/developers/docs/tutorials/hosting-on-cloudflare-workers). The Next.js
+edge runtime is built on Cloudflare Workers! Still, I think Next.js has some notable benefits:
 
-After deploying, add `<YOUR_VERCEL_URL>/api/interactions` as the `Interactions Endpoint URL` in your Discord app.
+- Next.js has the advantage of being a full web-app framework, making it easy to build an accompanying web app to go
+  along with your Discord app!
+- Deploying on Vercel is not only simple, but it also scales out very effectively if you need to build a more complex
+  app (analytics, logging, integrations, etc.)
+  - You can use Next.js/Vercel features like [Dynamic Image Generation](NextBot is a template for building and deploying a Discord bot with Next.js. It runs 100% in the edge runtime so you get
+lightning-fast responses and zero cold starts).

interfaces/discord.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

middlewares/discord-interaction.ts

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

middlewares/error-handler.ts

@@ -5,25 +5,36 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "type-check": "tsc"
+    "type-check": "tsc",
+    "register-commands": "tsx ./scripts/register-commands"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "nanoid": "^3.1.22",
-    "next": "^10.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "autoprefixer": "^10.4.16",
+    "discord-api-types": "^0.37.54",
+    "dotenv": "^16.3.1",
+    "ky": "^0.33.3",
+    "nanoid": "^4.0.2",
+    "next": "^13.5.2",
+    "postcss": "^8.4.30",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.3",
     "tweetnacl": "^1.0.3"
   },
   "devDependencies": {
-    "@types/node": "^12.12.21",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "discord-api-types": "^0.18.0",
-    "typescript": "^4.2.4"
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
+    "@types/node": "^20.5.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.47.0",
+    "eslint-config-next": "^13.4.19",
+    "prettier": "^3.0.2",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tsx": "^3.12.7",
+    "typescript": "^5.1.6"
   },
   "license": "MIT",
-  "description": "Simple discord bot using NextJS and serverless webhook handler for slash commands.",
+  "description": "Discord bot template using Next.js that runs at the edge. Uses Discord interactions webhooks to receive commands.",
   "main": "index.js",
   "author": "Jeff Huang"
-}
+}