Next.js: điền thẻ head bằng các thẻ tùy chỉnh

Làm thế nào để tùy chỉnhheadcủa ứng dụng Next.js của bạn

Từ bất kỳ thành phần trang Next.js nào, bạn có thể thêm thông tin vào tiêu đề trang.

Điều này rất hữu ích khi:

  • bạn muốn tùy chỉnh tiêu đề trang
  • bạn muốn thay đổi một thẻ meta

Làm thế nào bạn có thể làm như vậy?

Bên trong mọi thành phần, bạn có thể nhậpHeadthành phần từnext/headvà đưa nó vào đầu ra JSX thành phần của bạn:

import Head from 'next/head'

const House = props => ( <div> <Head> <title>The page title</title> </Head> {/* the rest of the JSX */} </div> )

export default House

Bạn có thể thêm bất kỳ thẻ HTML nào bạn muốn xuất hiện trong<head>của trang.

Khi gắn kết thành phần, Next.js sẽ đảm bảo các thẻ bên trongHeadđược thêm vào tiêu đề của trang. Tương tự khi ngắt kết nối thành phần, Next.js sẽ thực hiện việc xóa các thẻ đó.

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: