[next.js] 메타데이터

React/next.js

[next.js] 메타데이터 - title, script

Judith Hopps 2023. 3. 22. 16:34

메타데이터

HTML title 태그 와 같은 페이지의 메타데이터를 수정하는 방법은 아래와 같다.

import Head from 'next/head'
import Link from 'next/link';

export default function First () {
    return (
    <>
        <Head>
            <title>   First  </title>
        </Head>
        <h1>Hello</h1>
        <h2><Link href="/">go Home</Link></h2>
    </>)
}

그럼 아래 처럼 탭의 제목이 바뀐다.

Script

타사 스크립트 로드를 단순화한다.

import Script from 'next/script';

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

저작자표시 비영리 (새창열림)