Environment variables

Setting variables for Next.js

t3-env is used to provide type safe, validated environment variables to the Next.js app. View ./src/env.ts to see what variables are required for Next.js

Development

env.ts will read from any .env files in the root of your project.

Production

Production environment variables are managed through the Vercel dashboard.

Setting variables for Convex

View ./src/convex/convex.env.ts to see what variables are required for Convex

Development

Environment variables for the development server can be set through the Convex CLI or Convex dashboard. To learn about setting them via CLI, read the official documentation.

Production

Production environment variables are managed through the Convex dashboard.

Getting started

As we continue through the guide, we'll add environment variables as we need them. We can get started with a few though:

NEXT_CONVEX_INTERNAL_KEY

In order to create endpoints in Convex that can only be called by Next.js functions, we'll have to create an API key that is shared between the two environments. We can generate one by running the following command:

node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

This will give us a base64 encoded string that we can use as our API key. Add this to your both the Next.js and Convex environment variables. You can create separate keys for development and production if you'd like.

CONVEX_ENVIRONMENT

This is used in the backend to see if which server we're on. Set it to development for the development server and production for the production deployment.

Note: This only needs to be set in the Convex environment variables.

NEXT_PUBLIC_BASE_URL

This is used to get the URL of the app in Next.js. For example, I have it set to http://localhost:3000 locally and https://hmmm.chat for the production deployment. If you don't have a production URL yet, you can just set it to be a placeholder for now.

Note: This only needs to be set in the Next.js environment variables.