Siêu dữ liệu động

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 15 trên 47.

Đối tượng metadata là hằng số nên không thể dùng cho một tuyến động: app/dishes/[slug]/page.jsx hiển thị một món ăn khác nhau ở mỗi URL, và mỗi món cần tiêu đề riêng.

Để làm vậy, hãy xuất một hàm thay vào đó:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

Nó nhận cùng params như trang (một promise, nên bạn await nó) và trả về đối tượng có cấu trúc giống với đối tượng metadata. Hãy dùng một trong hai cách, không dùng cả hai trong cùng một tệp.

Mẫu tiêu đề

Việc lặp lại tên trang web trong tiêu đề của mọi trang sẽ nhanh chóng trở nên nhàm chán. Thay vì một chuỗi thông thường, layout có thể truyền xuống một mẫu:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: tiêu đề cho những trang không đặt tiêu đề
template: mẫu dành cho những trang có đặt tiêu đề; tiêu đề của trang sẽ được chèn vào vị trí của %s

Vì vậy, trang trả về title: 'Margherita' sẽ hiển thị Margherita | Coddy Eats trên thẻ, còn trang chủ không đặt giá trị nào sẽ giữ nguyên Coddy Eats. Hãy viết thương hiệu một lần trong bố cục.

Thử thách

Trung bình

Hiện tại, trang của mỗi món ăn đều hiển thị Coddy Eats trên tab. Đặt tiêu đề riêng cho từng trang.

Trong app/dishes/[slug]/page.jsx, thêm một hàm async được export tên là generateMetadata, hàm này:

Nhận { params } và chờ kết quả để lấy slug
Trả về { title: DISHES[slug].name }

app/layout.jsx đã có mẫu '%s | Coddy Eats', nên tiêu đề của /dishes/margherita sẽ là Margherita | Coddy Eats. Hãy xem tệp layout, bạn không cần thay đổi tệp này.

Tự làm thử

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | 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 nhau Siê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