无法访问env变量next.js
我正在用Next.js和Supabase创建一个应用程序。当我在/utils/supabase-client.js中创建客户机时，它会抛出Error: supabaseUrl is required.的错误。
这是我的档案：
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.SUPABASE_PROJECT_URL
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)当然，我的env变量是可以的，并在这样的.env文件中定义：
SUPABASE_PROJECT_URL=myRealSupabaseProjectUrl
SUPABASE_ANON_KEY=myRealSupabaseAnonKey应该澄清的是，我使用的是其他env变量(比如内容API键)，它们工作得很好。如果我登录/utils/supabase-client.js、supabaseUrl和supabaseAnonKey，日志就能工作，并显示正确的值。我认为问题就在createClient()上
然后，在模板页面中，我像这样使用它：
import { supabase } from '../lib/supabase-client'在组件内部：
const handleViews = useCallback(async () => {
try {
const { data } = await supabase
.from('Page Views')
.select()
.eq('slug', query)
try {
// @ts-ignore
if (data?.length < 1 || !data) {
return await supabase
.from('Page Views')
.insert({ slug: query, views: 1 })
} else {
const views = data[0]?.views
return await supabase
.from('Page Views')
.update({ slug: query, views: views + 1 })
}
} catch (err) {
console.log(err, 'error')
}
} catch (err) {
console.log(err, 'error')
}
}, [query])重复一遍:如果我将process.env.SUPABASE_PROJECT_URL和process.env.SUPABASE_ANON_KEY更改为它们的绝对值，这是非常好的。
谢谢
回答 2
Stack Overflow用户
发布于 2022-09-26 05:08:19
当在客户端组件中使用Supabase客户端时，您需要在env前面加上NEXT_PUBLIC。
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=注意，不要在SERVICE_ROLE密钥前加上NEXT_PUBLIC的前缀，因为它需要保密，并且只应该在安全的服务器端环境(例如API路由、NEXT_PUBLIC页面)中使用，而不应该公开客户端。
通过使用NEXT_PUBLIC预置env var，Next.js将在构建时用变量值替换env var，从而在生成的https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser中公开它。
Stack Overflow用户
发布于 2022-09-26 05:24:15
您需要在每个env变量中添加NEXT_PUBLIC作为前缀。
NEXT_PUBLIC_SUPABASE_PROJECT_URL=myRealSupabaseProjectUrl NEXT_PUBLIC_SUPABASE_ANON_KEY=myRealSupabaseAnonKey
https://stackoverflow.com/questions/73847937
复制相似问题
腾讯云开发者
