I am new to using a database and authentication. Following a bunch of tutorials and inspecting boilerplates to understand through reverse engineering. Unforuntately the examples of Supabase and NextJS all use the pages router and I want to use the app router.

I use this

npx create-next-app -e with-supabase

To start my project, which works. I can create users (signup), log in and log out, so far so good.
Then I want to, just for learning purposes, grab some data from my database and display it on the ‘protected page’.

For this it needs to become a client side component (or ?).

I tried do change the protected/page.tsx to something like this:

"use client"
import { createClient } from "@/utils/supabase/client";
import FetchDataSteps from "@/components/tutorial/FetchDataSteps";
import Header from "@/components/Header";
import { redirect } from "next/navigation";
import { useEffect, useState } from "react";
import { Client } from '@/utils/types';



export default async function ProtectedPage() {
  const supabase = createClient();
  const [clients, setClients] = useState<Client[]>([])

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    return redirect("/login");
  }

 useEffect(() => {
    const fetchClients = async () => {
      const { data: clients, error } = await supabase
        .from('clients')
        .select('*')

      if (error) console.log('error', error)
      else setClients(clients)
    }

    fetchClients()
    console.log(clients)
  }, [supabase])

  

  return (
    <div className="flex flex-col items-center flex-1 w-full gap-20">
      <div className="w-full">
        <div className="py-6 font-bold text-center bg-purple-950">
          This is a protected page that you can only see as an authenticated
          user
        </div>
    
      </div>

      <div className="flex flex-col flex-1 max-w-4xl gap-20 px-3 opacity-0 animate-in">
     
        <main className="flex flex-col flex-1 gap-6">
          Test page - here I could map over my clients if it would work :D 
        </main>
      </div>
    </div>
  );
}

Ive tried to find an example but cant find it. I am a bit lost. If someone knows a tutorial or example or has a tip that would be great.

Thanks in advance.