Migrating Remix loader data to a NextJs server component

// pocketbaseUtils.ts
import PocketBase from "pocketbase";

// next
const pb = new PocketBase(process.env.POCKETBASE_URL);

// remix
// const pb = new PocketBase(import.meta.env.VITE_PB_URL)

export const getPb = () => {
  return pb;
};

// remix --> blog_.$slug.tsx

import { getPb } from "../data/pocketbaseUtils"
import { LoaderFunction, LoaderFunctionArgs } from "@remix-run/node"
import { useLoaderData } from "@remix-run/react"

export const loader: LoaderFunction = async ({
  params,
}: LoaderFunctionArgs) => {
  const pb = getPb()
  const record = await pb
    .collection("posts")
    .getFirstListItem(`slug="${params.slug}"`, {})
  return record
}

const Post = () => {
  const record = useLoaderData<typeof loader>()
  // ...

// nextJs --> blog/[slug]/page.tsx
import React from 'react'
import { getPb } from '@/app/data/pocketbaseUtils'

type Params = Promise<{ slug: string[] }>

const Post = async ({ params }: { params: Params }) => {
  const { slug } = await params
  const pb = getPb()
  const record = await pb
    .collection('posts')
    .getFirstListItem(`slug="${slug}"`, {})

  return (
    // ... server component
    )