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
.