영어하는개발자산가누렁이

nextjs는 외부스크립트(SDK같은) 불러 올 때 최적화 해준다.

import Script from "next/script";
그때는 <Script />태그 쓰면 된다.

1. 외부 스크립트 불러오는 방법

<Script src="" strategy="" /> 
beforeInteractive = 페이지를 다 불러와서 상호작용 하기 전에 스크립트 불러옴
afterInteractive = 기본값 = 페이지 다 불러오고 나서 스크립트 불러옴
lazyOnload = 다른 모든 데이터나 리소스 불러오고 나서 스크립트 불러옴, 좋아요가 몇개인지 보려고 페이스북 SDK불러올때 쓰면 좋음

2. 외부 스크립트 로드 됐는지 확인 가능
예를 들어 facebook SDK를 불러오려면 아래 같은 페이지를 마주하게 된다.

외부 스크립트를 불러오려면 여러 지저분한 짓을 했어야 하는데 매우 쉽게 끝낼 수 있다.
onload에 넣으면 된다.

<Script
        src="https://connect.facebook.net/en_US/sdk.js"
        onLoad={() => {
          window.fbAsyncInit = function () {
            FB.init({
              appId: "your-app-id",
              autoLogAppEvents: true,
              xfbml: true,
              version: "v15.0",
            });
          };
        }}
      />