Cannot access env variables next.js

Question

I'm creating an app with Next.js and Supabase. When I create the client in /utils/supabase-client.js, it throws the error that Error: supabaseUrl is required..

Here is my file:

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)

Of course my env variables are okay and defined in a .env file like this:

SUPABASE_PROJECT_URL=myRealSupabaseProjectUrl
SUPABASE_ANON_KEY=myRealSupabaseAnonKey

It should be clarified that I'm using other env variables (like contentful API keys) and they work fine. And if I log in /utils/supabase-client.js the supabaseUrl and supabaseAnonKey the log works and in shows the right values. It seems that the problem is with the createClient() I think

Then, in a template page, I use it like this:

import { supabase } from '../lib/supabase-client'

and inside the component:

  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])

I repeat: this works absolutely fine if I change the process.env.SUPABASE_PROJECT_URL and process.env.SUPABASE_ANON_KEY for their absolute values.

Thanks

https://stackoverflow.com/questions/70764556/whats-the-difference-between-exposing-environment-variables-in-nextjs-through-t/70766460#70766460 — Yilmaz, Sep 25 '22 at 21:58
@KonradLinkowski where should I load it then? because I load a contentful file in the same folder and it works fine. And if I change the process.env.values for a string with the real value, it works. — Emiliano, Sep 25 '22 at 22:22
[Exposing variables](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser). It's rather how you import, not where is it. Can you show the import? — Konrad, Sep 25 '22 at 22:24
@KonradLinkowski done! I edit the original question. Thanks! — Emiliano, Sep 25 '22 at 22:33

score 6 · Answer 1 · answered Sep 26 '22 at 05:08

When using the Supabase client in a client-side component, you need to prefix your env vars with NEXT_PUBLIC, e.g.

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

Note, do not prefix your SERVICE_ROLE key with NEXT_PUBLIC as it needs to be kept secret and should only be used in secure server-side environments (e.g. API routes, SSR pages) but never exposed client-side.

By pre-fixing your env var with NEXT_PUBLIC Next.js will replace the env var with the variable value at build time and therefore expose it in your generated HTML, see https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

score 1 · Answer 2 · answered Sep 26 '22 at 05:24

1

You need to add NEXT_PUBLIC as prefix in your each env variables.

NEXT_PUBLIC_SUPABASE_PROJECT_URL=myRealSupabaseProjectUrl NEXT_PUBLIC_SUPABASE_ANON_KEY=myRealSupabaseAnonKey

answered Sep 26 '22 at 05:24

Drashti Kheni

1,065
9
23

Cannot access env variables next.js

2 Answers2