[Error] Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts
본문 바로가기
더 알아보기/에러

[Error] Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts

by 은돌1113 2023. 2. 14.

Next.js에서 _app.js에 <script>를 사용했더니 아래 사진처럼 빨간 줄이 떴다.

 

_app.js

 

오류 내용을 살펴보니 script를 동기적으로 사용하려고 해서 발생한 오류였고

 

공식문서에서 답을 찾았다.

 

no-sync-scripts | Next.js

No Sync Scripts Prevent synchronous scripts. A synchronous script was used which can impact your webpage performance. import Script from 'next/script' function Home() { return ( Home Page ) } export default Home

nextjs.org

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

_app.js

Next.js는 SSR(Server Side Rendering) 방식이기 때문에 미리 렌더링 된 화면을 서버에서 넘겨받아서 출력하는 데

화면이 그려지지 않은 상태에서 jQuery, summernote를 동기적으로 호출하면 오류가 발생할 수 있기 때문에

비동기적으로 호출할 수 있도록 next/script를 사용하거나 async, defer 등을 사용하라고 알려준 것 같다.

 

댓글