ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
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>
)
}
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;
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 등의 코드를 추가하는 방법을 알아보았습니다.
[React] 컴포넌트에 사용할 태그를 변경하는 방법
