Script Component

<script>의 확장형인 Next.js의 <Script /> 컴포넌트는 SDK 등의 스크립트를 쉽게 제어할 수 있다.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://connect.facebook.net/en_US/sdk.js" />
    </>
  )
}

모든 스크립트가 같은 선행 조건을 가지고 있지 않다. A 스크립트는 페이지 로드 전에 실행되어야 하고, B 스크립트는 페이지 로드 후, C 스크립트는 상관 없는 경우가 있다. next/script에서 제공하는 strategy 프로퍼티를 통해 손쉽게 제어 가능하다.

// 페이지 로드 전에 실행되어야 하는 경우
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="beforeInteractive" />
  
// 페이지 로드 후에 실행되어야 하는 경우(default)
  <Script src="https://connect.facebook.net/en_US/sdk.js" strategy="afterInteractive"/>
    
// 모든 로드가 끝나고 실행되어도 되는 경우
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload"/>

onLoad

스크립트가 실행될 때 함께 실행되어야 하는 코드를 가진 경우, onLoad 프로퍼티를 통해 쉽게 구현 가능하다. 예를 들어, 페이스북의 경우 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: "v13.0",
      });
    };
  // 추가 코드 끝
  }}
/>

참고
노마드 코더 - 캐럿마켓 클론코딩
Next.js Docs - Script