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을 열면 다음과 같은 출력이 표시됩니다.
첫 페이지 링크를 클릭하고 첫 번째 게시물 페이지에서도 변경된 제목을 확인합니다.
