Hey all. My brain is melting a touch today and I could use some general 👍👎 advise while thinking about Next.js and a Vercel Postgres database. Does this make sense?:

Examples I see have views and queries tightly coupled (great for small examples):

import { sql } from "@vercel/postgres";

export default async function Cart({
  params
} : {
  params: { user: string }
}): Promise<JSX.Element> {
  const { rows } = await sql`SELECT * from CARTS where user_id=${params.user}`;

  return (
    <div>
      {rows.map((row) => (
        <div key={row.id}>
          {row.id} - {row.quantity}
        </div>
      ))}
    </div>
  );
}

However, for a scaling application that could change databases altogether at some point (no plans, yet been there), I was thinking about adding a MyComponentData.ts to live alongside MyCompoent.tsx, which could abstract the calls and be replaced as needed.

Does anyone have opinions on dealing with data connections in Next.js? Some of the server-side rendering with data is still blurring in mind on occasion. My seperation of concern habits and React->Next.js data patterns are still being ironed out on occasion.

Thanks for taking a look. 🙂