In this article, you will learn about T3 env and its usage with an example. We also analyze T3 env usage in
T3 env
When you visit provides Next.js based example. Pay extra attention to the comments provided in the above example. Since Next.js is a full-stack framework, you have env variables for server and client and you need to be careful to not expose your server side enviroment variables to
client.
T3 env requires you to define your server env types in server object in schema.
/*
* Serverside Environment variables, not available on the client.
* Will throw if you access these variables on the client.
*/
server: {
DATABASE_URL: z.string().url(),
OPEN_AI_API_KEY: z.string().min(1),
},
Similarly, define the types for the client side environment variables
/*
* Environment variables available on the client (and server).
*
* 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
*/
client: {
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
},
So far, we only defined the variables and their types on the client and server side. Next step is to define runtimeEnv.
/*
* Due to how Next.js bundles environment variables on Edge and Client,
* we need to manually destructure them to make sure all are included in bundle.
*
* 💡 You'll get type errors if not all variables from `server` & `client` are included here.
*/
runtimeEnv: {
DATABASE_URL: process.env.DATABASE_URL,
OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
},
Use the schema in your app with autocompletion and type inference
// src/app/hello/route.ts
import { env } from "../env.mjs";
export const GET = (req: Request) => {
const DATABASE_URL = env.DATABASE_URL;
// use it…
};
You can import env in the file that requires it and you now have type-safety applied to your env variables with
auto-completion.
Lobechat usage of T3 env
Lobechat defines the schema, as explained above, in .
Usage example:
import { serverDBEnv } from '@/config/db';
//
let connectionString = serverDBEnv.DATABASE_URL;
About us:
At . We have developed reusable
References
1.
3. https://env.t3.gg/
SOCIAL SHARE CARD GENERATOR