Next.js meta 태그와 script 태그 다루기

이 글에서는 meta 태그와 외부 스크립트 설치를 위한 script 태그를 다룬다.

 

html문서에 메타 태그와 스크립트 태그를 작성하기 위해서는 두가지 방법이 있다.

1. next/head api 사용

2. _document 에서 next/document의 Head api 사용

 

메타 태그는 기본적으로 페이지 수준의 컴포넌트에서 next/head api를 사용할것

만약 _document안에 메타 태그를 작성할 경우 이후 다른 컴포넌트에서 next/head api를 사용한 코드가 작성되었을 경우 같은 메타태그가 교체되지 않고 중복된 키로 작성 되는 현상이 발생. next/head api만 사용하는 경우 마지막에 적용된 key에 해당하는 값만 적용된다.

여기서 키 포인트는 페이지 컴포넌트 레벨에서 next/head api 사용은 모든 페이지에서 실행된다는 점이다. 스크립트 링크를 넣어놨다면 그 역시 매번 실행된다.

 

스크립트가 head 들어가야 하는 경우 _document 에 작성

애드센스 같은 설치 스크립트는 next/head api를 사용할 경우 페이지 이동시마다 두번이상 호출되었다는 에러를 내뱉는다. 모든 페이지에서 스크립트 코드가 실행되면서 발생하는 문제. 전체 문서에서 한번만 실행하길 원한다면 _document에 작성되야 한다.

 

스크립트가 body에 들어가야 하는 경우 _document 혹은 next/script api 사용

만약 페이지 레벨의 컴포넌트에서 스크립트가 동적으로 삽입되길 원한다면 next/script api 사용

만약 html 문서 로드 최초에 한번만 실행되길 원한다면 _document body 하단에 스크립트 삽입