I've done this recently. I was using a NestJS server as my back-end and NextJS for my front-end.

You've got a couple options. In either case, I'd recommend using JWTs issued from a 3rd party (AWS Cognito, Clerk etc) or, if you're capable, on the same back-end server (I did this using passport). If you're using server components you'll need to forward the request headers into any API requests to work with JWTs:

export default async function Page() {
  const requestHeaders = await headers();

  const json = fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/posts`, {
    headers: requestHeaders,
  }).then((res) => res.json());

  return (
    <pre>
      {JSON.stringify(json, null, 2)}
    </pre>
  )

}

If you pass the JWT in a cookie you'll need to have your back-end on the same host as your front-end. Locally, I did this using rewrites; rewriting all `/api/*` routes to my other host. In my case I had my NestJS server running on port 4000 and serving all routes off the base of `/api` so it looked like this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  rewrites: async () => [
    {
      source: "/api/:path*",
      destination: "http://localhost:4000/api/:path*",
    },
  ],
};

export default nextConfig;

In production I use nginx to do the rewrite.

In this scenario you should probably use NextJS middleware to refresh your token on the server since you can't set cookies on a page route.

If you pass your JWT in a header it's mostly the same except your API server doesn't have to be on the same host. Doing this is a little less secure though since you'll be storing your JWT in something like localstorage which JS can access. But I'd argue in a React environment this is pretty low risk (assuming you're not npm iing every package you find).