无法访问环境变量 next.js

Question

我正在使用 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

需要澄清的是，我正在使用其他环境变量（例如内容丰富的 API 密钥）并且它们工作正常。如果我登录并且/utils/supabase-client.js日志有效并且显示正确的值。看来问题出在我认为supabaseUrlsupabaseAnonKeycreateClient()

然后，在模板页面中，我这样使用它：

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的绝对值，这绝对没问题。

谢谢

Answer 1

在客户端组件中使用 Supabase 客户端时，您需要在环境变量前添加 前缀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 路由、SSR 页面）中使用，但绝不能暴露在客户端。

通过使用 Next.js 预先修复您的环境变量，NEXT_PUBLIC将在构建时将环境变量替换为变量值，从而将其公开在生成的 HTML 中，请参阅https://nextjs.org/docs/basic-features/environment-variables #将环境变量暴露给浏览器