file 3 :

You can make all of your components to a client side component
by adding "use client" at the top of each of your files

shows this when I add 'use client'
and I was about to use useState

Okay, you also need to make all the functions non async
remove async for the functions as well

and do some tirck to lazy load the data you were loding through the APIs

this is how I am fetching
// lib/data.ts
import { sql } from '@vercel/postgres';
import { Trek } from './definitions';
import { unstable_noStore as noStore } from 'next/cache';

export async function fetchTreks() {
noStore();
try {
const { rows: treks } = await sql<Trek>SELECT id, name, region, description, duration, difficulty, popularity, max_altitude, image_url FROM treks ORDER BY name ASC;

return treks;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch all treks.');
}
}

export async function fetchTrekByName(trekName: string) {
noStore();
try {
const { rows } = await sql<Trek>SELECT id, name, region, description, duration, difficulty, popularity, max_altitude, image_url FROM treks WHERE name = ${trekName};

const trek = rows[0];

if (!trek) {
throw new Error(Trek with Name ${trekName} not found.);
}

return trek;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch trek by Name.');
}
}

not able to change it to non async function

remove the await, do some promise hanlding to fetch the data

this is my new function now
export function fetchTreks() {
noStore();

return new Promise<Trek[]>((resolve, reject) => {
sql<Trek>SELECT id, name, region, description, duration, difficulty, popularity, max_altitude, image_url FROM treks ORDER BY name ASC.then((result: QueryResult<Trek>) => {
const treks = result.rows;
resolve(treks);
}).catch(err => {
console.error('Database Error:', err);
reject(new Error('Failed to fetch all treks.'));
});
});
}

but i get this error now

yes, that's because you are trying to combine both frontend and backend code in one file

in server compoents you can do that, but in client comopoent you have to seperate the logic

Maybe you can create a /api route

or if you don't want to do that. you can remove all the react hooks in your application or figure out which part of your code is using the the cilent side react hooks and create a separate component for them and mark them as client components

These might help

sure thanks. I will try your suggestions : )