Next.js - Dữ liệu meta

Trong Next.js, chúng tôi có thể sửa đổi phần đầu của mỗi trang phản ứng rất dễ dàng với sự trợ giúp của <Head> thành phần phản ứng có sẵn.

Hãy cập nhật dự án nextjs được sử dụng trong chương Pages .

Cập nhật index.js như sau:

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

Cập nhật first.js như sau:

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>
      </>	  
   )
}

Ở đây, chúng tôi đã thêm một tham chiếu đến logo.png trong tệp index.js.

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

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

Xác minh đầu ra

Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.

Nhấp vào liên kết Trang Đầu tiên và xác minh tiêu đề cũng được thay đổi trong trang Bài đăng Đầu tiên.