[Next.js] 외부 자바스크립트

728x90

외부 자바스크립트는 타사 소스에서 추가된 모든 스크립트를 나타냅니다.

일반적으로 분석, 광고 및 고객 지원 위젯과 같이

처음부터 작성할 필요가 없는 새로운 기능을 사이트에 도입하기 위해 외부 스크립트가 포함됩니다.

1. 외부 자바스크립트 추가하기

1) pages/posts/first-post.js에 아래와 같이 Head 태그를 삽입합니다.

import Link from "next/link";
import Head from "next/head";

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );
}

메타 데이터 외에도 가능한한 빨리 로드하고 실행 되어야 하는 스크립트는 일반적으로 <head> 태그 내에 추가합니다.

일반적인 HTML에서는 script 태그를 사용하여 다음과 같이 외부 스크립트를 추가합니다.

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

이 스크립트에는 Facebook 소셜 플러그인 및 기타 기능을 소개하는 데
일반적으로 사용되는 Facebook SDK 가 포함되어 있습니다.

이 접근 방식은 효과가 있지만 이러한 방식으로 스크립트를 포함하면

동일한 페이지에서 가져온 다른 JavaScript 코드와 관련하여 로드될 시기를 명확하게 알 수 없습니다.

특정 스크립트가 렌더링 차단이고 페이지 콘텐츠

로드를 지연시킬 수 있는 경우 성능에 상당한 영향을 미칠 수 있습니다.

2. 스크립트 요소 사용하기

1) script를 사용하고자 하는 페이지 상단에 아래와 같이 next/script를 import 해옵니다.

import Script from 'next/script'

2) posts/first-post.js를 아래와 같이 수정합니다.

import Link from "next/link";
import Head from "next/head";
import Script from "next/script";

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={console.log(
          `script loaded correctly, window.FB has been populated`
        )}
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );
}

위 스크립트 구성 요소에는 몇가지 추가 속성이 정의되어 있습니다.

stractegy : 외부 스크립트를 로드 해야하는 시기를 제어합니다.
lazyOnload : stractegy의 값으로 사용된 lazyOnload는 브라우저 유효 시간 동안 이 특정 스크립트를 느리게 로드하도록 Next.js에 지시하는 것을 뜻합니다.

onLoad : 스크립트 로드가 완료된 직후 JavaScript 코드를 실행하는 데 사용합니다. 이 예에서는 스크립트가 올바르게 로드 되었다는 메세지를 콘솔에 기록합니다.

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

728x90

'프레임워크 > Next.js' 카테고리의 다른 글

[Next.js] 전역 CSS (0)	2022.02.17
[Next.js] CSS (0)	2022.02.17
[Next.js] Meta Data (0)	2022.02.17
[Next.js] Image (0)	2022.02.17
[Next.js] Link (0)	2022.02.17