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.
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: {
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: {
problem solved. Thanks
The npm command is incorrect. The package name is @supabase/supabase-js.