Next.js에서 getServerSession 사용 시 발생하는 오류 해결하기

Next.js 애플리케이션에서 getServerSession을 사용하려고 할 때 다음과 같은 오류가 발생

Error: `headers` was called outside a request scope.

문제의 코드

import { connectDB } from "@/util/database";
import { NextApiRequest, NextApiResponse } from "next";
import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]";

export default async function BookMarkChkHandler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method === 'POST') {
        const session = getServerSession(authOptions); // 문제 발생 부분
        const db = (await connectDB()).db('trip');
        
        console.log('session', session);
        await db.collection('bookmark').insertOne(req.body);
        res.status(200).json({ msg: 'success' });
    }
}

오류 원인

getServerSession은 API 라우트에서 사용될 때 req와 res를 인자로 받음.
그러나 위의 코드에서는 getServerSession(authOptions)처럼 호출하여, 요청 정보를 전달하지 않아 오류가 발생.

해결

const session = getServerSession(authOptions); // 문제 발생 부분

부분을

const session = await getServerSession(req, res, authOptions);

로 변경함으로써 해결!

헷갈림 포인트

getServerSession은

1. API 라우트에서의 사용:

const session = await getServerSession(req, res, authOptions);

2. 서버 컴포넌트에서는 요청 컨텍스트가 자동으로 제공되므로, req와 res를 전달할 필요가 없음.

const session = await getServerSession(authOptions);

정리하자면

서버 컴포넌트에서의 getServerSession

• 어디에서 사용?
  • RootLayout 같은 서버 컴포넌트
• 어떻게 동작?
  • 서버에서 렌더링될 때, 요청 정보가 자동으로 전달됨.
  • 그래서 getServerSession을 호출할 때 req와 res를 따로 줄 필요가 없음.

API 라우트에서의 getServerSession

• 어디에서 사용?
  • API 파일 (pages/api/) 안
• 어떻게 동작?
  • 이곳에서는 직접 HTTP 요청을 처리해야 함.
  • 그래서 요청을 처리하는 함수에서 req와 res를 사용해야함.