I am quite new to Next/TRPC and have followed various guide to get next-auth working with it. (using app router)

// server/trpc.ts
import { TRPCError, initTRPC } from '@trpc/server';
import { type Context } from './context';

export const t = initTRPC.context<Context>().create();

export const router = t.router;
//export const protectedProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(opts => {
  if (!opts.ctx.session) {
    throw new TRPCError({
      code: 'UNAUTHORIZED'
    });
  }
  return opts.next({
    ctx: {
      session: opts.ctx.session
    }
  });
});

// server/context.ts
import { getServerSession } from 'next-auth';
import { authOptions } from '@/constants/authOptions';

export async function createContext() {
  const session = await getServerSession(authOptions);

  return { session };
}

export type Context = Awaited<ReturnType<typeof createContext>>;

// app/_trpc/serverClient.ts
import { appRouter } from '@/server';
import { createContext } from '@/server/context';
import { t } from '@/server/trpc';

const createCaller = t.createCallerFactory(appRouter);
export const serverClient = createCaller(await createContext());

// app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/server';
import { createContext } from '@/server/context';

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: async () => await createContext()
  });

export { handler as GET, handler as POST };

This all works fine in dev, but when building for production I get this error

Error: headers was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

I have narrowed it down to my calling of getServerSession, as if I comment it out and provide a hardcoded context it compiles fine. Should I not be calling getServerSession here?