Bước 5: Tiê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 43 trên 47.
Thử thách
DễĐặt tiêu đề thẻ riêng cho từng món ăn.
- Trong
app/menu/[slug]/page.jsx, hãy xuấtasync function generateMetadata({ params }). - Chờ
paramsđể lấy slug, sau đóawait getDish(slug). - Nếu không có món ăn, hãy trả về
{ title: 'Not on the menu' }. - Nếu có, hãy trả về
namecủa món ăn làmtitlevàdescriptioncủa món ăn làmdescription.
Tự làm thử
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng