Next.js-메타 데이터

Next.js에서는 다음의 도움으로 각 반응 페이지의 헤드 섹션을 매우 쉽게 수정할 수 있습니다. <Head> 내장 된 반응 구성 요소.

Pages 장 에서 사용되는 nextjs 프로젝트를 업데이트 해 보겠습니다 .

다음과 같이 index.js 업데이트-

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

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

다음과 같이 first.js 업데이트-

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

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

여기에 index.js 파일에 logo.png에 대한 참조가 추가되었습니다.

Next.js 서버 시작

서버를 시작하려면 다음 명령을 실행하십시오-.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

출력 확인

브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.

첫 페이지 링크를 클릭하고 첫 번째 게시물 페이지에서도 변경된 제목을 확인합니다.