Use Next.js to Query a Single Record From Supabase
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.
Instructor: [0:00] We want to be able to click one of our lessons and go to another page that displays more details of that lesson, such as the description. Let's start off by making these links. We're going to import the Link component from next/link and replace our paragraph tag with that Link component.
[0:16] The HREF for our link is going to go to slash and then our lesson ID. We then need to wrap our lesson title in an A-tag. Let's also add a little bit of magic styling to make this look a little nicer, and also on our anchor tag. Much better.
[0:34] When we click one of our lessons, we will go to its Details page. We're getting a 404 because we haven't created that yet. For this, we want to use a dynamic route, which we can do by saying, [ID] .js.
[0:48] Our component will now be passed this lesson ID as a parameter called ID. Let's build out our component. Now we see the text lesson details appearing on the page for both of our lessons.
[1:03] We also want to pre-render each of these lesson details pages at build time. We need to tell Next.js a list of possible paths with the getStaticPaths function. We need to import our Supabase client again to make a request for all of those lessons.
[1:17] Similar to our previous example, we're going to query Supabase for all of the lessons. Only this time, we only care about the ID column. We can then iterate over each of those lessons.
[1:27] We can pull out the ID field and just return an object with the key params, which is another object with the key ID set to a stringified version of our ID. That's going to give us back a list of all of our possible paths, which we can then return from this function.
[1:45] We also want to set fallback to false, which just means if our users try to navigate to an ID that doesn't exist, they'll just see the 404 page. We can declare our getStaticProps function, which will be called for each of our possible paths.
[1:58] This will automatically be passed that params object, which will have the ID that we care about. Now we can make another request to Supabase to get the data for that particular lesson.
[2:09] We can say, Supabase.from lesson SELECT all the columns, but only where the ID column matches the ID that we were passed as a parameter. Since we're only expecting to get one row back, we can chain on .single, which is just going to give us that individual lesson.
[2:27] We can return our props object and we need to remember to export that function from our component. When we save and refresh our application, we won't see anything visually, but that lesson is now being passed into our component and we can log it out here.
[2:45] That's our specific lesson for ID number 2. Let's display our lesson details on the page. We want to display a H1 for our Lessons Title and a paragraph for our Description. Again, we can add some magic styling.
[3:00] Now we have a list of each of our lessons, and we're able to click into each one to see more details.
I see console.log('LESSONS', lessons) as LESSONS [ { id: 1 }, { id: 2 } ]
I found it...was missing () around { params: { .... }}
Glad you spotted it cos I was stumped! 😆
I get
Cannot convert undefined or null to objecterror. 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 } } }