Environment Variable

Кодонд API key, database URL зэрэг нууц мэдээлэл шууд бичих маш аюултай. GitHub-т push хийвэл бүх хүнд харагдана. Environment variable нь кодоос тусад нь нууц мэдээллийг хадгалах стандарт арга юм.

.env.local файл

Төслийн root директорт .env.local файл үүсгэж variable-г тодорхойлно:

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xyzabcdef.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

.env.local файлыг заавал .gitignore-д нэмнэ — Git-т хэзээ ч commit хийхгүй:

# .gitignore
.env.local
.env*.local

Next.js анхнаасаа .env.local-г .gitignore-д нэмдэг тул create-next-app ашигласан бол аюулгүй.

NEXTPUBLIC prefix — клиент болон сервер

Next.js-д хоёр төрлийн environment variable байдаг. Нэрний NEXT_PUBLIC_ prefix нь хаана ашиглах болохыг тодорхойлно:

NEXT_PUBLIC_SUPABASE_URL     → клиент болон серверт хоёуланд харагдана
SUPABASE_SERVICE_ROLE_KEY    → зөвхөн серверт харагдана, хөтчид очдоггүй

// lib/supabase/client.ts — клиент тал (хөтөч)
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!, // ✅ клиентэд ашиглаж болно
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, // ✅ клиентэд ашиглаж болно
  );
}

// app/api/admin/route.ts — зөвхөн серверт
import { createClient } from "@supabase/supabase-js";

export async function POST() {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY!, // ✅ зөвхөн серверт — клиентэд хэзээ ч илгээхгүй
  );
  // ...
}

NEXT_PUBLIC_ үгүй variable-г Client Component дотор process.env ашиглан уншвал undefined буцаана — алдаа гарахгүй, зүгээр л харагдахгүй. Тиймээс нууц key-г клиентэд дамжуулах боломж техникийн хувьд бага байдаг.

TypeScript — орчны variable шалгах

process.env.X нь TypeScript дотор string | undefined төрөлтэй. ! оператор ашиглан "энэ утга заавал байна" гэж хэлж болно, эсвэл шалгалт хийнэ:

// lib/env.ts — нэг газарт шалгаж export хийх
function requireEnv(name: string): string {
  const value = process.env[name];
  if (!value) {
    throw new Error(`Environment variable "${name}" тохируулагдаагүй байна`);
  }
  return value;
}

export const env = {
  supabaseUrl: requireEnv("NEXT_PUBLIC_SUPABASE_URL"),
  supabaseAnonKey: requireEnv("NEXT_PUBLIC_SUPABASE_ANON_KEY"),
  supabaseServiceRole: requireEnv("SUPABASE_SERVICE_ROLE_KEY"),
};

Ингэснээр алдагдсан variable-г ажиллуулах үед нэн даруй мэдэгдэнэ — удаан хугацаанд алдааг хайхаас зайлсхийнэ.

Vercel дээр тохируулах

Production deploy хийхдээ Vercel dashboard дотор variable-г нэмнэ:

Vercel → Project → Settings → Environment Variables

.env.local файлыг Vercel сервер дээр ашиглахгүй — dashboard дотор тусад нь тохируулах шаардлагатай. NEXT_PUBLIC_ prefix-тэй variable-г Production, Preview, Development гурван орчинд тусад нь тохируулж болно.

Дараагийн хичээлд:

Supabase болон Next.js-г хэрхэн холбохыг судална. @supabase/ssr package ашиглан сервер болон клиент тал дахь Supabase client үүсгэх аргыг ойлгоно.