[next.js] Synchronous scripts should not be used 에러 해결

개인 웹페이지 만들기 프로젝트를

개발 완성하고

build를 해보려구

npm run build를 하자

error가 떴다

 

에러 내용은

Synchronous scripts should not be used

에러였고

구글링해보니 이는

nextjs는 서버사이드에서 렌더링하는데

화면이 뜨기 전에 script를

불러오려고해서 발생하는 문제였다

 

해결방법은 2가지가 있는데

 

1. script뒤에 defer 붙여주기

<script src="https://kit.fontawesome.com/f4ff5f81bc.js" crossOrigin="anonymous" defer/>

 

이렇게 불러오는 script 뒤에 defer를 붙여주면 된다

 

2. next.js의 script 사용하기

next.js에서 제공하는 next/script 컴포넌트를

사용하면 된다

<Script
  src="https://kit.fontawesome.com/f4ff5f81bc.js"
  strategy="beforeInteractive" // or "afterInteractive"
/>

위와 같은 방식으로 사용하면 된다

 

strategy 속성의 값으로는

beforeInteractive: 페이지가 인터랙티브해지기 전에 스크립트를 로드

afterInteractive: 페이지가 인터랙티브해진 후 스크립트를 로드

lazyOnload: 페이지가 로드된 후 지연 로딩

 

이렇게 있으니 원하는 옵션을

사용해주면 될 것 같다

 

 

두 가지 방법 모두

npm run build를 했을 때

오류가 수정된 것을 확인할 수 있다