트러블 슈팅

- 문제 상황

next.js에서 supabase 설정 중.
supabaseUrl이랑 supabaseAnonKey는 환경변수로 관리하려고 시도중이었음.
자꾸 사진처럼 세 번 실행되는데, 값이 서버사이드에서는 잘 들어오는데 클라이언트사이드에서는 안들어옴.
근데 "use client"문제 아님.

// .env.local
SUPABASE_URL= "YOUR_SUPABASE_URL";
SUPABASE_ANON_KEY= "YOUR_SUPABASE_ANON_KEY";

// supabase.ts
import { createClient } from "@supabase/supabase-js";
import { Database } from "../types/supabase";

const SUPABASE_URL = process.env.SUPABASE_URL as string;
const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY as string;

console.log(SUPABASE_URL, SUPABASE_ANON_KEY);

const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_ANON_KEY);

export default supabase;

- 문제 해결

아직 이유 알 수 없지만, .env.local 환경변수 설정할 때, 변수에다가 접두사로 NEXT_PUBLIC_ 붙여주니까 해결됨. 아마도 next.js 프레임워크의 규칙 아닐까.

// .env.local
NEXT_PUBLIC_SUPABASE_URL= "YOUR_SUPABASE_URL";
NEXT_PUBLIC_SUPABASE_ANON_KEY= "YOUR_SUPABASE_ANON_KEY";