Storing and accessing Discord application environment variables with Next.js

In this post, we'll learn how to find a Discord applications's id and secret and how to store them as environment variables in a Next.js app.

The client id and secret are required for some powerful Discord-related goodies in our Next.js app, like securely authenticating our users using Discord or making calls to the Discord API.

Finding your Discord application's client id and secret

Before we begin, you'll need to create a Discord application.

Once you've created your application, select your application in the "My Applications" page. This will open the dashboard for your application.

To find your application's client id and secret, visit the "OAuth2" page in the sidebar. Under the "Client information" section, you'll find your client id and a "Reset Secret" button in place of the client secret.

You'll need to press "Reset Secret" in order to regenerate and display the secret. Note: you can only view this secret on this page once and will have to regenerate it and use a new one if you lose it, so be sure to store it in a convenient place like your app's environment variables!

Storing the client id and secret as environment variables

Now that we have our client id and secret, we need to store them as environment variables in our Next.js app.

This post assumes you already have a Next.js app. If you don't, you can create one and follow along with the following command: npx create-next-app

A useful feature of Next.js is the way it manages local environment variables. We can create a .env.local file and Next.js will automatically load any variables we define when we run the app.

Create the .env.local file at the root of your project and then add your client id and secret:

DISCORD_CLIENT_ID=<paste your client id here>
DISCORD_CLIENT_SECRET=<paste your client secret here>

Accessing our environment variables

Now that we've stored our environment variables, we'll be able to access them within our application using process.env:

const discordClientId = process.env.DISCORD_CLIENT_ID
const discordClientSecret = process.env.DISCORD_CLIENT_SECRET