jgjgill

Next.js 13 에러 삽질기 - unable to verify the first certificate

No Filled

에러 상황

다음과 같은 에러가 발생했다.

next-js-13-first-certificate-error

처음 에러 문구를 봤을 때 updateDehydratedSuspenseComponent, updateSuspenseComponent가 있어서 Suspense와 관련된 에러로 생각했다.

Suspense 코드를 적용하는 과정에서 발생해서 완전히 틀린 거는 아니지만 정확한 문제 원인은 아니었다.

이것 때문에 잘못된 방향으로 삽질 좀 했다.. 😇

Axios 관련 에러

브라우저상이 아닌 서버 상에서 생긴 로그를 확인해보면 다음과 같다.

next-js-13-server-error-log

이때 Axios와 관련된 에러일수도 있겠다는 생각을 했다.

관련해서 자료를 찾아보니 다음과 같은 문제로 발생했던 에러였다.

  • 일반적으로 Axios는 브라우저에서 비동기 요청을 하는데 사용되는 라이브러리
  • 브라우저에서 수행하면 브라우저가 Axios에 대한 인증서 처리
  • 서버에서 Axios를 사용하는 경우 응답을 가져올 수 없어서 오류 발생

따라서 Axios 관련해서 다음 코드를 추가해주면 된다.

import axios from 'axios';
import https from 'https';

export const axiosInstance = axios.create({
  ...
  httpsAgent: new https.Agent({ rejectUnauthorized: false }),
});

참고 문서

@2023 powered by jgjgill