Using Supabase CLI: How to Configure Local Supabase for Next.js Development

If you’re building projects with Supabase, using Supabase CLI is a must. The main benefit of using Supabase CLI is that it lets you setup a local instance of your Supabase backend so that you can play with your database and test it, without worrying about messing up your production Supabase backend. Once setup, you can run everything offline!

Here’s how to setup Supabase CLI and use it in your Next.js project.

1. Install on your os.

    # macos & linux:
    brew install supabase/tap/supabase
   
    # windows:
    scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
    scoop install supabase
   

   Refer to this article for more details: Supabase CLI | Supabase Docs

2. Make sure to have Docker Desktop installed.

   Refer to this for Docker Desktop if you don’t have it installed: Docker Desktop

3. Run the following command in the root folder of your Next.js project.

    supabase init
   

   This will create a folder called supabase. Also a supabase/config.toml file is generated after running supabase init. You can edit this file to change the settings for your locally running project. After you make changes, you will need to restart using supabase stop and then supabase start for the changes to take effect.

4. Start Docker Desktop on your machine.

5. Run this following command

    supabase start
   

   And go watch a half/full episode of Naruto or Brooklyn Nine-Nine (‘cause that’s how long this might take, depending on your machine and internet connection, especially when it’s the first time).

6. After completing the run, it would give you some credentials like below, in your terminal:

             API URL: http://127.0.0.1:54321
         GraphQL URL: http://127.0.0.1:54321/graphql/v1
      S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
              DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
          Studio URL: http://127.0.0.1:54323
        Inbucket URL: http://127.0.0.1:54324
          JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
            anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
    service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
       S3 Access Key: 625729a08b95bf1b7ff351a663f3a23c
       S3 Secret Key: 850181e4652dd023b7a98c58ae0d2d34bd487ee0cc3254aed6eda37307425907
           S3 Region: local
   

   You will want to save them in your notes or create a file called supabase-local-credentials.txt, save these credentials in it and add it to your .gitignore.

7. Update Supabase environment variables in your .env.local using the credentials that were generated by Supabase CLI, like below:

    NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
    NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
    # ... other environement variables
   

8. Use the following command to stop the Supabase setup when done using it.

    supabase stop
   

   Always run this command after you're done with your work session!

And… that’s it! That’s how you setup Supabase CLI and use it in your Next.js project.