What's the best way to get firestore collection or query data into getServerSideProps with nextJS and react-firebase-hooks

I'm trying to convert an application to NextJS. In particular, I'm working on converting this file where I do some simple client-side data fetches to get a list of posts from my firestore:

// Posts page

const q = query(
    collection(db, "posts"),
    orderBy("likes", "desc")
);

In the child component, I then use the useCollection hook from react-firebase-hooks to take the result of that query and turn it into useable data.

I thought that in NextJS I would jut be able to throw all of this into getServerSideProps and then use it that way. However, as firestore returns a bunch of functions rather than just JSON, the following snippet fails:

export async function getServerSideProps() {
  const posts = await query(collection(db, "posts"), orderBy("likes", "desc"));
  return { props: { posts } };
}

So I tried to bring the useCollection hook into my getServerSideProps fn, but that failed because it's not a React component or hook, so I can't use custom hooks.

I'm new to NextJS so I'm not even sure if I'm approaching this the right way. I've looked around for examples of using collections in getServerSideProps, but found nothing. All the examples I've seen are around getting a single doc rather than querying for a whole collection and then passing down that data. (e.g. this one).

How can I get collection data from firebase into my Posts page while still using this hook library?

query is only used for specifying which documents you want to retrieve from a collection or collection group.

But you must use getDocs to fetch documents belonging to particular collection. Check the code below.

import { getDocs, collection, query, orderBy } from "firebase/firestore"

export async function getServerSideProps() {

 const postsRef = query(collection(db, "posts"), orderBy("likes", "desc"))

 const postsSnapshot = await getDocs(postsRef)
 const posts = postsSnapshot.docs.map((doc) => doc.data());
 return { props: { posts } };
}

Check documentation for more information.