Query Data From Supabase Using Next.js
supabase-js is a JavaScript library that makes interacting with your Supabase database simple!
In this video, we install the package with npm using npm i @supabase/supabase.js. We then create a reusable Supabase client that can be used throughout our application.
Additionally, we create environment variables for the Supabase URL and key, which are available in our Next.js client. Exposing these values to the client is not a security risk, as we will be enabling Row Level Security in a future lesson.
Lastly, we tell Next.js that we would like to pre-render our landing page at build time, by exporting out a getStaticProps function. This ensures that our lesson data is only fetched once - when we rebuild our application - rather than each time to user visits the page.
Instructor: [0:00] Let's display our Supabase lessons in our Next.js application. The first thing we need to do is install the supabase-js library. Now, let's create a file to initialize our Supabase client. We're going to put this in a utils folder.
[0:12] Now, we can import { createClient } from '@supabase/supabase-js' and export out a new variable for our Supabase client. This function takes two parameters, a URL and a key. Let's get those from Supabase.
[0:23] Let's go to Settings and then API. First, let's grab our URL. Back over in our Next.js application, let's create a .env.localfile. We're going to declare a variable for NEXT_PUBLIC_SUPABASEURL, and we're going to paste that URL from Supabase. Let's do the same for our Supabase key. We're going to use the anon key.
[0:49] Now, we can restart out development server to read in those environment variables. Back in our Supabase.js file, we can read in those values by saying process.env.NEXT_PUBLIC_SUPABASEURL and NEXT_PUBLIC_SUPABASE_KEY. Now, we can import our Supabase client in our index.js file and start querying our database.
[1:12] Because this lesson data is entirely public, we can tell Next.js that it can pre-render this at build time by exporting out a getStaticProps() function. Here, we can use the Supabase client to query all of the lessons from the Lesson table.
[1:27] We also declare which columns we would like to select. In this case, we want all of the columns. This is going to give us back some data. This will be a collection of all of our lessons, which we can then return as our props, which will pass it into our component. We can console log out our lessons here to see what this contains.
[1:49] Now, when we refresh our application and open the console, we'll see that we have our array of lessons coming from Supabase. Let's iterate over our array of lessons and display them in our web app. We can say lessons.map over each lesson, and for each of those lessons, we want to render a paragraph tag with the lesson's title.
[2:09] We also want to set a key on a paragraph tag to be lesson.id. When we Save, we'll see those lessons are displaying in our web app with data being loaded from our Supabase database.