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:
- Bắt đầu với Next.js
- Next.js vs Gatsby vs create-react-app
- Cách cài đặt Next.js
- Liên kết hai trang trong Next.js bằng Liên kết
- Nội dung động trong Next.js với bộ định tuyến
- Cung cấp dữ liệu cho thành phần Next.js bằng getInitialProps
- Tạo kiểu cho các thành phần Next.js bằng CSS
- Tìm nạp trước nội dung trong Next.js
- Sử dụng bộ định tuyến để phát hiện liên kết hoạt động trong Next.js
- Xem nguồn để xác nhận SSR đang hoạt động trong Next.js
- Next.js: điền thẻ head bằng các thẻ tùy chỉnh
- Triển khai ứng dụng Next.js ngay bây giờ
- Next.js: chỉ chạy mã ở phía máy chủ hoặc phía máy khách trong Next.js
- Triển khai ứng dụng Next.js trong phiên bản sản xuất
- Cách phân tích các gói ứng dụng Next.js
- Các mô-đun tải chậm trong Next.js
- Thêm thành phần trình bao bọc vào ứng dụng Next.js của bạn
- Các biểu tượng được Next.js thêm vào ứng dụng của bạn
- Gói ứng dụng Next.js
- Cách sử dụng Bộ định tuyến Next.js
- Cách sử dụng các tuyến API Next.js
- Cách lấy cookie phía máy chủ trong ứng dụng Next.js
- Cách thay đổi cổng ứng dụng Next.js