Next.js + Microsoft Graph API: 개발 모드에선 잘 되는데, 빌드하면 토큰 만료 에러가? (feat. Lifetime validation failed)

Next.js 프로젝트에서 Microsoft Graph API를 사용하여 회의실 일정을 가져오는 기능을 개발했습니다.
개발 모드(yarn dev)에서는 완벽하게 작동했지만, yarn build 후 프로덕션 환경에 배포하자마자 아래와 같은 에러가 발생했습니다.

InvalidAuthenticationToken: Lifetime validation failed, the token is expired.

이 문제를 해결하기 위해 어떤 원인이 있었는지, 그리고 어떻게 해결했는지를 공유합니다!

---

✅ 2. 문제 상황

문제 증상

• 개발 환경 (yarn dev) → 정상 동작 ✅
• 프로덕션 빌드 (yarn build) → 배포 후 첫 요청부터 에러 ❌

에러 메시지

Calendardata {
  error: {
    code: 'InvalidAuthenticationToken',
    message: 'Lifetime validation failed, the token is expired.'
  }
}

사용한 흐름

• Microsoft Graph API

• Client Credentials Flow (Application permissions)

• Next.js app directory (server component)

---

✅ 4. 해결 방법

문제 해결 핵심: Runtime 시점에 API 호출

빌드 타임이 아닌 요청 시점에 API를 호출하도록 구조를 변경했습니다.

app 디렉토리에서 해결책

Next.js app 디렉토리에서는 아래처럼 export const dynamic = "force-dynamic" 를 추가하면, 빌드 시점이 아닌 런타임마다 fresh하게 실행됩니다.

export const dynamic = "force-dynamic";

export default async function Home() {
  const data = await getRoomCalendar("example@company.com");
  // ...
}

이렇게 하면 Access Token도 요청마다 새로 발급되어, 만료 문제가 완전히 사라집니다.

✅ 5. 정리 및 느낀점

이번 경험을 통해 "빌드 시점과 런타임 시점의 차이"가 얼마나 중요한지 다시 한 번 느꼈습니다.
특히 Next.js app 디렉토리에서는 Server Component가 빌드 시 snapshot될 수 있다는 점을 반드시 고려해야 합니다.

Tip

• API 인증 로직은 항상 "런타임"에 실행하도록 설계
• export const dynamic = "force-dynamic" 적극 활용
• Graph API의 Client Credentials Flow는 Refresh Token이 없다!

---

혹시 여러분도 비슷한 문제를 겪고 있다면, 댓글로 공유해주세요!

참고

• Microsoft Graph — Access tokens and lifetime
• Next.js — Dynamic Rendering
• JWT 디코딩 툴 (jwt.ms)