Head | Notion

Next JS는 index.html 파일이 없다. 따라서 html에서 만드는 어플리게이션의 메타데이터(<title>, <meta> 등)를 담을 수 있는 <head> 태그를 따로 만들어줄 수 있다.

Head from next/head 컴포넌트

components/hoc/withHead.js

간편하게 Head를 붙일 수 있는 HOC를 만들 수도 있다.

import Head from "next/head"

function withHead({Component, title, description}) {
  const Comp = props => {
    return (
      <>
        <Head>
          <title>{title}</title>
          <meta name="description" content={description} />
        </Head>
        <Component {...props} />
      </>
    )
  }

  return Comp;  
}

export default withHead;

pages/about.js

import Link from 'next/link'
import React from 'react'
import withHead from '../components/hocs/withHead'

function About() {
  return (
    <div>
      About
      <Link href="/"><div>return</div></Link>
    </div>
  )
}

export default withHead(About, '어바웃', '어바웃 페이지입니다.')  // 이렇게 사용!