ReferenceError: crypto is not defined in Next.js

Next.js와 Typescript를 이용해 프로젝트를 진행하던 중 난수를 발생시키기 위해 crypto 패키지의 randomUUID 함수를 호출했을 때, 마주친 에러다.

프론트엔드와 백엔드간의 통신 도중 발생한 에러라서, 브라우저의 콘솔 창에서는 500 내부 서버 에러를 던져줬고, 터미널에서 crypto가 정의되지 않았다는 메시지를 보고, 기본적인 모듈인 것으로 알고 있는데 어떻게 불러올 수 있을지 감이 안왔는데, 아래의 스택 오버플로 포스트를 보고 쉽게 해결 방법을 얻을 수 있었다.

Node.js에서 CommonJS 스타일로 require 문법을 이용해 모듈을 불러오듯, Next.js문서 상단에 import crypto from “crypto";를 통해 모듈을 불러와 해결할 수 있었다.

Using Web Crypto API in NextJS, but getting error 'crypto is not defined'

Crypto.randomUUID() - Web APIs | MDN

원문: Medium