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.