개요
- Next.js 에서는
next/head라는 것을 빌트인으로 제공한다. - HTML 마크업의
head엘리먼트 내부에 들어갈 내용들을 설정 가능하다.- 기존의
head엘리먼트는 HTML 상단에 위치했어야 하는 것과 다르게 Next.js 에서 제공하는<Head />엘리먼트는 위치 제약이 없다.
- 기존의
예제
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage주의점 1: 중복 태그
- 아무 위치나 아무 페이지나 입력 가능하며, 컴포넌트로 나뉘어지는 리액트 앱의 특성상 중복으로 엘리먼트를 넣을 확률도 꽤 있다.
- 그래서
key프로퍼티를 이용하여 중복된 요소를 추가하지 않도록 주의해야 한다.
- 그래서
중복 예시
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<Head>
<meta property="og:title" content="My new title" key="title" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage- 위와 같은 경우
meta태그가 2개가 있는데, 두번째의meta태그만 렌더링된다. keyattribute 에 의해서 자동으로 핸들링된다.
주의점 2: 컴포넌트 언마운트시 제거
head 의 컨텐츠는 컴포넌트가 언마운트될 때 clear 된다. 각 페이지에서 head 내부에 들어가야하는 것들을 잘 정의하고 있는지 살펴보자.
주의점 3: <script /> 태그를 이용한 스크립트 파일 추가
script와 같은 태그는title,meta와 같이 direct children 으로Head엘리먼트 내부에 존재해야 한다.React.Fragment혹은 arrays 내부에 감싸져있거나 하지 않다면, 태그가 클라이언트 사이드 네비게이션에서 올바르게 선택되지 않을 것이다.
Next.js 에서는
<script />태그를 직접 이용하기보다는 next/script 를 사용하는 것을 권장한다.
레퍼런스
반응형
'프레임워크 > next.js' 카테고리의 다른 글
| next.js 내부 next.config.js 파일에서 할 수 있는 일들 (0) | 2022.06.23 |
|---|---|
| Next.js 에서 Hydration 이란 무엇인가? (0) | 2022.06.23 |
| Next.js 가 지원하는 Pre-rendering 이란 무엇일까? (0) | 2022.06.19 |
| Next JS 에서 스타일링을 적용하는 다양한 방법 (0) | 2022.06.18 |
| Next.js APP _app.js 의 모든 것 (0) | 2022.06.18 |