Carbon
Adapters

Next.js

Learn how to set up and deploy your Carbon bot using Next.js, including development and production environments.

Setup

Automatic Setup

Quickly set up your Carbon bot with minimal configuration using the automatic setup guide.

Other Runtimes

Explore how to set up and deploy your Carbon bot using different runtimes.

Manual Setup

This is a continuation of the Basic Setup guide. If you haven't already, make sure to follow the steps in the guide before proceeding.

Move Handle File

Ensure the file where you export your handler is placed at src/app/api/discord/[...slug]/route.ts. The catch all slug is necessary for handling each of the routes Carbon creates.

Create a Handler

Using the @buape/carbon/adapters/next package, you can create a handler that you can then export for Next.js API routes. This server will handle incoming interactions and route them to your bot.

import { createHandler } from '@buape/carbon/adapters/next'
 
const handle = createHandle( ... )
 
const handler = createHandler(handle)
export { handler as GET, handler as POST }

Running in Development

Set Environment Variables

First things first, you'll need to grab your Discord application's secrets from the Developer Portal and paste them in your .env.local file.

Start a Proxy

Discord requires a public URL to route interactions to your project. To achieve this, you'll need to set up a proxy. The simplest way to do this is by using localtunnel. Once you have the public URL, you may want to set it as BASE_URL="<PUBLIC_URL>/api/discord" in your .env.local file.

npx localtunnel

You can use the --subdomain flag to specify a custom subdomain for your proxy.

Configure Portal URLs

Now that you have a public URL, navigate back to the Discord Developer Portal and set the "Interactions Endpoint URL" to <BASE_URL>/interactions.

<BASE_URL> refers to the public URL plus the relative path to your Next.js API routes, likely /api/discord.

Invite your App

You'll need to invite your app to your server to interact with it. To do so, navigate to the Installation tab of your app in the Discord Developer Portal.

Run the Bot

You can now run your bot using:

npm run dev

Deploy Your Commands to Discord

Finally, to deploy your commands to Discord, navigate to <BASE_URL>/deploy?secret=<DEPLOY_SECRET> in your browser. This will send your command data to Discord to register them with your bot.

Deploying to Production

Your new app can be deployed anywhere you can run a Next.js app. For detailed instructions, refer to the Next.js deployment documentation. Once you do have a deployment, remember to configure your portal URLs to the URL of your running app.

Remember to deploy your commands to Discord using <BASE_URL>/deploy?secret=<DEPLOY_SECRET>.

Last updated on

Previous

Cloudflare Workers

Next

Node.js

On this page

SetupManual SetupMove Handle FileCreate a HandlerRunning in DevelopmentSet Environment VariablesStart a ProxyConfigure Portal URLsInvite your AppRun the BotDeploy Your Commands to DiscordDeploying to Production
Edit on GitHub