1. 5
    Use Next.js to Query a Single Record From Supabase
    3m 6s

Use Next.js to Query a Single Record From Supabase

InstructorJon Meyers

Share this video with your friends

Send Tweet

In this video, we look at building a pre-rendered static page for each of our lessons from Supabase. We use a Next.js dynamic route to create a page that can display the details for a lesson, and specify a finite list of possible urls with the getStaticPaths function.

The getStaticProps function will then be called for each of these lessons, and passed a params object to determine which page is currently being built. This is where we make a request for additional data from Supabase - in this case, the lesson's description. Again, the request will only happen once at build time, rather than each time the user requests the page.

Additionally, we use the Next.js <Link> component to enable client-side transitions from the landing page to each of the lesson details pages. This means we do not need to do a full page load from the server each time the user navigates to a new page. the <Link> component will pre-fetch each of our lesson's detail pages, while the user is browsing the list.

Scott Carlton
~ 3 years ago

I get Cannot convert undefined or null to object error. My table is called lessons and I can see on index all my lessons, but going to [id].tsx I get this. Code is bellow. What am I doing wrong?

export const getStaticPaths = async () => { const { data: lessons } = await supabase.from('lessons').select('id') console.log('LESSONS', lessons) const paths = lessons.map(({ id }) => { params: { id: id.toString() } }) return { paths, fallback: false } }

export const getStaticProps = async ({ params: { id } }) => { const { data: lesson } = await supabase.from('lessons').select('*').eq('id', id).single()

return { props: { lesson } } }

Scott Carlton
~ 3 years ago

I see console.log('LESSONS', lessons) as LESSONS [ { id: 1 }, { id: 2 } ]

Scott Carlton
~ 3 years ago

I found it...was missing () around { params: { .... }}

Jon Meyersinstructor
~ 3 years ago

Glad you spotted it cos I was stumped! 😆