I want to query my Supabase table using the ID in the slug e.g. localhost:3000/book/1 then show information about that book on the page in Next.js.

Table

book/[id].js

import { useRouter } from 'next/router'

import { getBook } from '@/utils/supabase-client';



export default function Book({bookJson}) {

  const router = useRouter()

  const { id } = router.query

  

  return <div>

    <p>Book: {id}</p>

    <h1>{bookJson}</h1>

  </div>

}



export async function getServerSideProps(query) {

  const id = 1 // Get ID from slug

  const book = await getBook(id);

  const bookJson = JSON.stringify(book)



  return {

    props: {

      bookJson

    }

  };

}

utils/supabase-client.js

export const getBook = async (id) => {

  const bookString = id

  let bookId = parseInt(bookString);

  

  const { data, error } = await supabase

    .from('books')

    .select('id, name')

    .eq('id', bookId)



  if (error) {

    console.log(error.message);

    throw error;

  }



  return data || [];

};