웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

nextjs 스크립트 head에 추가하는 방법

Last Modified : 2020-11-16 / Created : 2020-11-16
7,623
View Count

Next.js를 사용하는 경우 head 영역에 스크립트 코드를 추가하려고 합니다. 어떻게 하면 되는지 간략하게 알아봅니다.




# next.js head에 스크립트 추가하기


아래는 nextjs 앱에서 analytics 등의 웹 트래킹 코드 추가가 필요하여 사용한 방법입니다. 이처럼 스크립트를 head에 추가한 이유는 하나의 페이지가 아닌 웹 사이트 전체에 스크립트 요소를 추가하기 위해서 입니다. 그럼 방법은 어떻게 될까요?

- next/head 모듈을 사용하기
- dangerouslySetInnerHTML를 사용하기


가장 필요한 방법은 바로 위의 두 가지 입니다. 첫째로 next/head 모듈이 필요합니다.


! next/head 사용하기

이 모듈을 사용하면 앱의 head 영역에 원하는 코드를 추가할 수 있습니다. 스타일, 파비콘(favicon) 등을 사용하는 경우에도 사용할 수 있고 지금 알아보는 script 역시 이 모듈을 사용해 추가하는 것이 가능합니다.

먼저 모듈을 추가해야겠죠. 모듈을 추가 후 Head 컴포넌트를 아래와 같이 사용합니다.


import * as React from 'react';
import Head from 'next/head';

const myComponent = () => {
  return (
    <Head>
      <script></script>
    </Head>
  )
}

필요한 next/head 모듈과 Head 컴포넌트의 추가가 완료되었습니다. 이제 Head 내부에 원하는 코드를 추가하면 되겠죠. 다만 dangerouslySetInnerHTML를 꼭 사용하여 코드 추가가 필요합니다. 이를 아래처럼 적용하여 사용하면 됩니다.

@ myComponent.jsx
import * as React from 'react';
import Head from 'next/head';

const myFunction = `!function() { alert(); }`;
const myComponent = () => {
return (
  <Head>
    <script dangerouslySetInnerHTML={{ __html: myFunction }}></script>
  </Head>
)
};

export default myComponent;

위의 코드가 전체 코드입니다. 여기서 변수 myFunction에 적용할 script 코드를 추가하였습니다. 그리고 ``로 스크립트의 내부 코드를 랩핑하여 사용하였습니다. 이처럼 사용하면 해당하는 스크립트 코드가 head에 추가된 것을 확인하실 수 있습니다.


여기까지 next.js에서 head 영역에 script 등의 코드를 추가하는 방법을 알아보았습니다.

Previous

[React] 컴포넌트에 사용할 태그를 변경하는 방법

Previous

react 검색창에 debounce 적용하는 방법