Query Data From Supabase Using Next.js

Share this video with your friends

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.

waynehee

~ 2 years ago

Hi, i failed to fetct data from supabase

error - pages/index.js (15:34) @ getStaticProps error - TypeError: Cannot read properties of undefined (reading 'from') at getStaticProps (webpack-internal:///./pages/index.js:25:92) at Object.renderToHTML (/Users/waynehee/the-book/node_modules/next/dist/server/render.js:386:26) at runMicrotasks (<anonymous>) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async doRender (/Users/waynehee/the-book/node_modules/next/dist/server/base-server.js:669:38) at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/Users/waynehee/the-book/node_modules/next/dist/server/base-server.js:778:28) at async /Users/waynehee/the-book/node_modules/next/dist/server/response-cache/index.js:80:36 { page: '/' } 13 | 14 | export const getStaticProps = async () => {

15 | const { data: lessons } = await supabase.from("lesson").select("*"); | ^ 16 | 17 | return { 18 | props: {

waynehee

~ 2 years ago

sorry i missed out the following:

14 | export const getStaticProps = async () => {

15 | const { data: lessons } = await supabase.from("lesson").select("*"); | ^ 16 | 17 | return { 18 | props: {

waynehee

~ 2 years ago

problem solved. Thanks

Mike Frazier

~ 2 years ago

The npm command is incorrect. The package name is @supabase/supabase-js.