NextJS NextAuth getServerSession Is Always Null in Vercel Environment — [Error]: Headers cannot be modified. Read more: https://nextjs.org/docs/app/api-reference/functions/headers

Roberto Cunha
1 min readFeb 9, 2024

Ao desenvolver uma pequena aplicação em NextJS, precisei realizar uma requisição à uma rota localizada no caminho /app/api/resource_name/route.js

Após realizar uma chamada Fetch, era importante checar se o usuário estava logado para realizar a busca dos dados dele no banco de dados.

Durante o desenvolvimento, a chamada ocorria sem problemas, porém ao realizar deploy para o Vercel, recebi o seguinte erro ao testar minha aplicação:

[Error]: Headers cannot be modified. Read more: https://nextjs.org/docs/app/api-reference/functions/headers

Após algumas buscas no Google e algumas lidas no Stackoverflow, encontrei uma solução:

Ao realizar o fetch, passar o header

import headers from 'next/headers'

fetch(URL,{
method: 'GET',
headers: headers()
}

Porém, ao reenviar para o Vercel, percebi que o erro continuava sendo lançado.
Então, após mais algumas buscas, eis que encontro a solução:

import headers from 'next/headers'

fetch(URL, {
method: 'GET',
headers: new Headers(headers())
}

Dessa forma, consegui executar o seguinte trecho de código na minha rota de api /app/api/resource_name/route.js

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export async function GET(){
const session = await getServerSession(authOptions);
const user = session.user
}

No momento da escrita desse post, essas eram as versões de algumas bibliotecas que utilizei

{
"next": "14.0.4",
"next-auth": "^4.24.5",
"react": "^18"
}

Espero que esse pequeno post possa ajudar você!

--

--