Siêu dữ liệu trang

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 14 trên 47.

Thẻ trình duyệt, dấu trang, kết quả trên Google, bản xem trước liên kết trong cuộc trò chuyện: tất cả đều đọc các thẻ <title> và <meta> của trang. Bạn không bao giờ tự viết những thẻ đó trong Next.js.

Thay vào đó, một trang hoặc bố cục xuất một đối tượng có tên là metadata:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

Tên này rất quan trọng: phải chính xác là metadata, được xuất từ tệp route. Next.js đọc tên này khi kết xuất và tự tạo phần head cho bạn.

Metadata được kế thừa xuống dưới cây, theo cùng thứ tự từ ngoài vào trong như các layout: layout gốc đặt giá trị mặc định, và bất kỳ trang nào cũng có thể ghi đè chúng. Trang không xuất metadata sẽ kế thừa mọi thứ layout đã đặt, đó là lý do mọi trang cho đến nay đều được gọi sau layout gốc.

Thử thách

Người mới

Hiện tại, mọi tab của Coddy Eats đều hiển thị Coddy Eats, vì bố cục gốc đặt giá trị này. Trang menu cần có tiêu đề riêng.

Trong app/menu/page.jsx, hãy xuất một đối tượng metadata phía trên thành phần.
Đặt title của đối tượng này thành chính xác Our Menu.

Các bài kiểm tra đọc tiêu đề tài liệu tại /, sau đó điều hướng đến /menu và đọc lại tiêu đề.

Tự làm thử

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhauSiêu dữ liệu trangSiêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions