Bước 4: Trạng thái tải
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 42 trên 47.
Thử thách
DễThêm bộ khung tải cho trang món ăn.
- Hoàn thiện tệp
app/menu/[slug]/loading.jsxbằng cách xuất một component mặc định, không có props và không phải hàm bất đồng bộ. - Trả về một
<div className="detail">chứa một<div>cóid="dish-skeleton"vàclassName="detail-thumb skeleton". - Thêm phần tử con thứ hai có
className="empty"và nội dung chờ tùy ý, hay hơn từ Loading.
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