I'm currently working on a Next.js application where I am fetching posts from a Supabase database. Everything works fine when retrieving all posts, but when trying to retrieve a single post dynamically using the ID, the screen displays null. Here's a breakdown of the folder structure:
The code in app/notes/page.tsx retrieves all the posts (also referred to as bounties).
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { createSupabaseAppServerClient } from "@/utils/supabase/supabaseAppRouterClient"; import {createBrowserClient, createServerClient} from "@supabase/ssr"; export default async function Notes() { const supabase = createServerComponentClient<any, "public", any>( { cookies}, {supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL, supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}); const { data } = await supabase.from("bounties").select(); return( <pre><code>app/pages/notes/[...id]is responsible for displaying specific notes based on their IDs, but unfortunately it returns null on the screen.import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; export default async function Page( {params : {id}} : {params: {id: string}} ) { const supabase = createServerComponentClient<any, "public", any>( { cookies}, {supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL, supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}); const { data} = await supabase.from('bounties').select().eq('id', 'bounty_id').single(); return( <pre>{JSON.stringify(data, null, 2)}</pre> ); }