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
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ê!