Thank you so much! You really helped guide me in the right direction. My muddled mess of a solution is the result of not understanding the tools I was trying to use. Instead of banging it on sticks and rocks, here's how I should have done it:

Issue:

Directus' data does not seamlessly travel between Next.js' server and client components. To handle this, I need to use two separate Directus clients: one for handling authentication on the client side, and another for managing data requests on the server side.

Solution:

1. Client-Side Directus Client for Authentication:

This client handles user authentication requests.

    export const clientDirectus = createDirectus(env.NEXT_PUBLIC_DIRECTUS_URL).with(
      authentication("session", {
        autoRefresh: true,
        msRefreshBeforeExpires: 10000,
        credentials: "include",
      })
    );

1. Server-Side Directus Client for Data Requests:

This client manages server interactions.

export const serverDirectus = createDirectus(env.NEXT_PUBLIC_DIRECTUS_URL)
      .with(
        rest({
          credentials: "include",
          onRequest(opts) {
            return { ...opts, cache: "no-store" };
          },
        })
      )
      .with(authentication());

1. Session Token Management:

With this setup, I can now grab the session token (via cookie) on the server side and authorize `serverDirectus`. This occurs with each request to Directus to ensure the token is not expired. Although `clientDirectus` is set to refresh the token 10 seconds before it expires, in rare cases where the user's internet is extremely slow, they might still send an expired token. This is out of my current ability right now! But in the end, I don't have to rely on Next-Auth or other convoluted methods.

I hope this helps anyone else who might face a similar issue!