Next.js项目中无法访问Supabase相关环境变量的问题求助

各位大佬好，我现在在做一个Next.js项目，用的是ts-nextjs-tailwind-starter模板，目前在创建Supabase客户端的时候遇到了环境变量的问题，卡好久了，想请大家帮忙看看！

我已经把SUPABASE_URL和SUPABASE_ANON_KEY这两个变量放到了.env文件里，Supabase客户端的代码是这样写的：

import { createClient } from '@supabase/supabase-js';
import { Database } from '@/types/database';

export const supabaseClient = createClient<Database>(
  process.env.SUPABASE_URL as string,
  process.env.SUPABASE_ANON_KEY as string
);

console.log('url', process.env.SUPABASE_URL)
console.log('keyss', process.env.SUPABASE_ANON_KEY)

现在碰到的几个具体问题：

• 当通过process.env.SUPABASE_ANON_KEY和process.env.SUPABASE_URL读取变量时，会直接报错“Supabase url and key is required”
• 用console.log打印这两个变量的值，只有VS Code的终端能看到日志输出，浏览器的控制台里完全看不到
• 但如果我把URL和密钥直接硬编码写在代码里，不用process.env读取，就完全没有问题，Supabase也能正常工作

我猜是不是浏览器没办法访问这些环境变量？有没有大佬能帮我分析下原因或者给个解决方向呀？

备注：内容来源于stack exchange，提问作者Noor Fatima