프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.



# next.js에서 script 파일 추가하기
nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.

하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법
둘. /page/ 라우팅 페이지에 추가하여 사용하기


여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.


! /page/ 라우팅 페이지에 추가하여 사용하기
이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페이지에서만 해당 스크립트를 로드하죠~ 그럼 아래에서 자세히 알아봅니다.

만약 /about/페이지에 /scripts/about.js 파일을 불러오려면 아래처럼 할 수 있습니다.

@ about.js
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <script type="text/javascript" src="/scripts/about.js"></script>
    </Head>

    <MyComponent />
  </div>
)

이제 /scripts/에 위치한 about.js 파일이 페이지가 열리면서 로딩되게 됩니다. 이때 해당 스크립트는 <head> 태그안에 위치할 수 있도록 Head 컴포넌트를 사용하였습니다. Head 컴포넌트는 next.js에서 제공하는 내장 컴포넌트로 head 태그 내부에 메타 및 스크립트, 스타일 등을 불러와 사용할 때 매우 편하게 선언할 수 있죠.

여기까지 스크립트를 로딩하는 방법에 대하여 간단하게 알아봤습니다.