Jump to content

Environment Variables

ุฅู† Create-T3-App ุชุณุชุฎุฏู… Zodโ†— ู„ู„ุชุฃูƒุฏ ู…ู† ุตู„ุงุญูŠุฉ ุงู„ู€ environment variables ุฃุซู†ุงุก ุงู„ู€ runtime ุนู† ุทุฑูŠู‚ ุชูˆููŠุฑ ุจุนุถ ุงู„ู…ู„ูุงุช ุงู„ุงุถุงูุฉ

๐Ÿ“ src/env

โ”ซ ๐Ÿ“„ client.mjs

โ”ซ ๐Ÿ“„ schema.mjs

โ”ซ ๐Ÿ“„ server.mjs

ู‚ุฏ ูŠุจุฏูˆ ู…ุญุชูˆู‰ ู‡ุฐู‡ ุงู„ู…ู„ูุงุช ู…ุฎูŠูู‹ุง ู„ู„ูˆู‡ู„ุฉ ุงู„ุฃูˆู„ู‰ ุŒ ู„ูƒู† ู„ุง ุชู‚ู„ู‚ ุŒ ูู‡ูˆ ู„ูŠุณ ู…ุนู‚ุฏู‹ุง ูƒู…ุง ูŠุจุฏูˆ. ุฏุนู†ุง ู†ู„ู‚ูŠ ู†ุธุฑุฉ ุนู„ูŠู‡ุง ูˆุงุญุฏุฉ ุชู„ูˆ ุงู„ุฃุฎุฑู‰ ุŒ ูˆู†ุณูŠุฑ ุฎู„ุงู„ ุนู…ู„ูŠุฉ ุฅุถุงูุฉ environment variables ุฅุถุงููŠุฉ.

ุฅุฐุง ูƒู†ุช ุชุฑูŠุฏ ุฅุถุงูุฉ environment variable ุฌุฏูŠุฏ ุŒ ููŠุฌุจ ุนู„ูŠูƒ ุฅุถุงูุชู‡ ุฅู„ู‰ ูƒู„ ู…ู† โ€œ.envโ€ ูˆูƒุฐู„ูƒ ููŠ env / schema.mjs._

ู…ู„ู schema.mjs

ู‡ุฐุง ู‡ูˆ ุงู„ู…ู„ู ุงู„ุฐูŠ ุณุชุนู…ู„ ุนู„ูŠุฉ. ูŠูŽุญุชูˆูŠ ุนู„ู‰ ู…ูุฎุทุทูŠู† ุŒ ุฃุญุฏู‡ู…ุง environment variables ู…ู† ุฌุงู†ุจ ุงู„ุฎุงุฏู… ูˆุงู„ุขุฎุฑ ู…ู† ุฌุงู†ุจ ุงู„ุนู…ูŠู„ ุจุงู„ุฅุถุงูุฉ ุฅู„ู‰ Object ุงู„ู€ โ€œclientEnvโ€.

env/schema.mjs
export const serverSchema = z.object({
  // DATABASE_URL: z.string().url(),
});

export const serverEnv = {
  // DATABASE_URL: process.env.DATABASE_URL,
};

export const clientSchema = z.object({
  // NEXT_PUBLIC_WS_KEY: z.string(),
});

export const clientEnv = {
  // NEXT_PUBLIC_WS_KEY: process.env.NEXT_PUBLIC_WS_KEY,
};

ุงู„ู€ Server Schema

ุฃู†ุดุฆ ุงู„ู€ environment variables schema ู…ู† ุฌุงู†ุจ ุงู„ุฎุงุฏู… ู‡ู†ุง. ุชุฃูƒุฏ ุฃู† ู„ุง ุชุถูŠู NEXT_PUBLIC ู‚ุจู„ ุงุณู… ุงู„ู…ุชุบูŠุฑุŒ ุณูŠูุดู„ ุงู„ู€ Validation ุฅุฐุง ู…ุง ูุนู„ุช ู‡ุฐุง.

ุงู„ู€ Client Schema

ุฃู†ุดุฆ ุงู„ู€ client-side environment variables ู‡ู†ุงุŒ ุญุชู‰ ุชุฌุนู„ู‡ู… ู…ุชุงุญูŠุช ู„ู„ู€ client ุฃุถู NEXT_PUBLIC ู‚ุจู„ ุงู„ุงุณู….

ุงู„ู€ clientEnv Object

ู‡ูู†ุง ุญูŠุซู ุชู‚ูˆู… ุจุนู…ู„ Destruct ู„ู€ process.env ุชุญุชุงุฌ Zod ุงู„ูŠ Object ู„ุชูƒูˆู† ู‚ุงุฏุฑุฉ ุนู„ู‰ ุชุตุญูŠุญ ุงู„ู…ูุฏุฎู„ุงุช ูˆุจุณุจุจ ุทุฑูŠู‚ุฉ ุนู…ู„ Next.js ูู„ู† ู†ุณุชุทูŠุน ูุนู„ ู‡ุฐุง ุชู„ู‚ุงุฆูŠุง ู„ุฐู„ูƒ ูŠุฌุจ ุฃู† ุชุชู… ู‡ุฐุฉ ุงู„ุนู…ู„ูŠุฉ ูŠุฏูˆูŠุงุŒ ู„ุง ุชู‚ู„ู‚ ูู€ Typescript ุชู‚ูˆู… ุจุชุญุฐูŠุฑูƒ ุฅุฐุง ุงุฑุชูƒุจุช ุฎุทุงู‘.

// โŒ This doesn't work, we need to destruct it manually
const schema = z.object({
  NEXT_PUBLIC_WS_KEY: z.string(),
});

const validated = schema.parse(process.env);

ุงู„ู€ server.mjs & client.mjs

ู‡ุฐุง ู‡ูˆ ุงู„ู…ูƒุงู† ุงู„ุฐูŠ ูŠุชู… ููŠู‡ ุงู„ุชุญู‚ู‚ ู…ู† ุงู„ู€ Object ูˆู…ู† ุซู… ุชุตุฏูŠุฑู‡ุง. ู„ู† ุชุญุชุงุฌ ุฅู„ู‰ ุชุนุฏูŠู„ ู‡ุฐู‡ ุงู„ู…ู„ูุงุช.

ุฅุณุชุฎุฏุงู… ุงู„ู€ Environment Variables

ุฅุฐุง ุฃุฑุฏุช ุฅุณุชุฎุฏุงู… ุงู„ู€ env vars ููŠู…ูƒู†ูƒ ุฅุณุชูŠุฑุงุฏ env/client.mjs ูˆ env/server.mjs ููŠ ุงู„ู…ูƒุงู† ุงู„ุฐูŠ ุชุฑูŠุฏ

pages/api/hello.ts
import { env } from "../../env/server.mjs";

// `env` is fully typesafe and provides autocompletion
const dbUrl = env.DATABASE_URL;

ุงู„ู€ .env.example

ุจู…ุง ุฃู† ู…ู„ู .env ู„ูŠุณ ู…ูุถู…ู†ุงูŽ ููŠ ุงู„ู€ version controlุŒ ูู‚ุฏ ุฃุถูู†ุง ู…ู„ู .env.example ูˆุงู„ุฐูŠ ูŠู…ูƒู†ูƒ ุฃู† ุชุชุฑูƒู‡ุŒ ูˆุฃุถูŠุงูŽูŽ ู†ู†ุตุญูƒ ุฃู† ุชูุจู‚ูŠ ู‡ุฐุง ุงู„ู…ู„ู ู…ุชุฒุงู…ู†ุง ู…ุน ุงู„ู…ู„ู ุงู„ุงุณุงุณูŠ ุญุชูŠ ุชุญุตู„ ุนู„ูŠ ุฃูุถู„ ุชุฌุฑุจุฉ ุชุทูˆูŠุฑ ู…ู…ูƒู†ุฉ

ุฃุถู Environment Variables

ุญุชู‰ ู†ุชุฃูƒุฏ ู…ู† ุฃู†ูƒ ุณุชุถูŠู ุงู„ู€ environment variablesุŒ ูŠุฌุจ ุนู„ูŠูƒ ุฃู† ุชุถูŠูู‡ุง ููŠ ู…ูƒุงู†ูŠู† ู…ุฎุชู„ููŠู†

๐Ÿ“„ ู…ู„ู .env: ู‡ู†ุง ู†ุถูŠู ุงู„ู…ุชุบูŠุฑุงุช ุจุดูƒู„ ุทุจูŠุนูŠ ูƒุงู†ูƒ ุชุชุนุงู…ู„ ู…ุน ู…ู„ู .env ุนุงุฏูŠ

๐Ÿ“„ ู…ู„ู schema.mjs: ู‡ู†ุง ุชุถูŠู ุงู„ู€ Logic ุงู„ุชูŠ ุณุชุณุชุฎุฏู…ุฉ Zod ู„ูุญุต ุตู„ุงุญูŠุฉ ุงู„ู…ุชุบูŠุฑุงุช

๐Ÿ“„ ู…ู„ู .env.example: ู‡ู†ุง ุชุถูŠู ุงู„ู…ุชุบูŠุฑุงุช ู„ูƒู† ุจุฏูˆู† ุฃูŠ ูƒู„ู…ุงุช ุณุฑูŠุฉ ู„ู„ุญูุงุธ ุนู„ู‰ ุฃู…ุงู†ูƒ

ุฃู…ุซู„ุฉ

  1. ุฃุถู the environment variable ุงู„ูŠ .env:
TWITTER_API_TOKEN=1234567890
  1. ุฃุถู environment variable to schema.mjs:
export const serverSchema = z.object({
  // ...
  TWITTER_API_TOKEN: z.string(),
});

export const serverEnv = {
  // ...
  TWITTER_API_TOKEN: process.env.TWITTER_API_TOKEN,
};

ู…ู„ุญูˆุทุฉ: ุงู„ู†ุต ุงู„ูุงุฑุบ ุชุชุนุงู…ู„ ู…ุนุฉ zod ุนู„ูŠ ุฃู†ู‡ ู†ุต ุตุญูŠุญุŒ ุฅุฐุง ู…ุง ุงุฑุฏุช ุงู† ุชูุบูŠู‘ุฑ ู‡ุฐุง ุงู„ุงุณู„ูˆุจ ูุฅุณุชุฎุฏู… z.string().min(1)

ู…ู„ุญูˆุทุฉ: ุฃุถู ุฅุณู… ุงู„ู…ูุชุบูŠูŠุฑ TWITTER_API_TOKEN ููŠ example.env ูˆู„ูƒู† ู„ุง ุชูุถู ุงู„ู€ token

TWITTER_API_TOKEN=