[Next.js] Head 컴포넌트, google font 적용

iberis2·2023년 8월 2일

next.js

NextJS

목록 보기

4/10

Head

next/head 에서 <Head> 컴포넌트를 import 해서 html 파일의 <head> 태그에 넣고 싶은 내용을 넣을 수 있다.

title

<title> 태그 에 웹 페이지 제목을 넣을 수 있다

link

<link> 태그 에 favicon을 넣을 수 있다

/public 폴더 안에 favicon으로 사용할 ico 파일이 있다면 href='/파일명.ico'로 주소를 바로 사용할 수 있다.

// /pages/_app.js

import Head from 'next/head'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>NextJs Shopping Mall</title>
        <link href='/nextIcon.ico' rel='icon' />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

/pages/_app.js 파일에 적용하면 모든 페이지에 공통적으로 적용된다.
하위 페이지 파일에 작성하면, 공통 페이지에 적용한 내용을 덮어 쓴다

// /pages/search.js

import Head from 'next/head'

export default function Search() {
  return (
    <div>
      <Head>
        <title>{q} 검색 결과</title>
      </Head>
	...
    </div>
  )
}

google 폰트 적용

공식문서
🔗 구글 폰트
🔗 함수 인수

next/font/google 패키지에서 사용하려는 폰트를 import 하고 객체를 만든다.

방법1. Head 컴포넌트의 style 태그

<Head> 컴포넌트 안의 <style> 태그를 활용해서 전역 스타일로 적용한다.

import Head from 'next/head'
import { Noto_Sans_KR } from 'next/font/google'

const notoSansKR = Noto_Sans_KR({
  weight: ['400', '700'], // 주의: 숫자(400, 700 같은 형태)가 아닌 문자열('400', '700' 같은 형태) 로 작성해야함 
  subsets: [], // 폰트에서 사용할 언어, 빈배열은 전부 다 사용
  // 만약에 영문만 사용하는 폰트라면 ['latin']으로 써 주면 된다.
})

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>NextJs Shopping Mall</title>
        <link href='/nextIcon.ico' rel='icon' />
        <style>
          {`
          html {
            font-family: ${notoSansKR.style.fontFamily}, sans-serif;
          }
        `}
        </style>
      </Head>
      <Component {...pageProps} />
    </>
  )
}

방법2. main 태그

또는 2. notoSansKR 객체의 className 프로퍼티를 사용하면 이 클래스가 적용된 요소 안에서는 폰트를 적용하게 된다.

import Head from 'next/head'
import { Noto_Sans_KR } from 'next/font/google'

const notoSansKR = Noto_Sans_KR({
  weight: ['400', '700'], 
  subsets: [], 
})

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>NextJs Shopping Mall</title>
        <link href='/nextIcon.ico' rel='icon' />
      </Head>
      <main className={notoSansKR.className}> 
      	<Component {...pageProps} />
	  </main>
    </>
  )
}

폰트 객체 속성 중 subsets 🔗 공식문서 링크 클릭

next.js의 구글 폰트는 자동으로 폰트를 preload 한다.
→ 장점: 글꼴 파일의 크기가 줄어들고 성능 향상

preload(미리 로드할 하위 집합 정의)를 위해 subset (하위 집합) 값을 지정해 사용할 언어를 특정한다.

하위 집합을 지정하지 않으면 preload 경고(subsets 인수를 삭제하면 에러 발생)가 발생한다.

공식문서 하단의 Noto_Sans_JP 예시와 같이, preload를 false로 지정할 수 있다.

아쉽게도 subsets에는 latin, greek, vietnamese 밖에 없다. (한국어 지원 X),

영문 등 subsets을 지원하는 폰트를 사용한다면 preload를 위해 subsets 속성을 지정해주는 것이 좋다.

반면 presets에 존재하지 않는, 예를 들어 영어가 아닌 다국어에만 해당 폰트를 사용하는 경우라면 preload를 false로 사용할 수 있다.

참고: 🔗 코드잇 Next.js로 웹사이트 만들기
🔗 next.js : google font 적용하기🧚‍♀️(feat. tailwind)

iberis2

자동화와 기록으로 더 효율적으로 일하는 으른 개발자가 되려고 합니다.