Ringkasan Pengambilan Data
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 28 dari 47.
Tantangan
SedangRingkasan bab: menu yang memuat semuanya di server.
lib/data.js tersedia dan terkunci: getDishes() mengembalikan promise untuk array objek { id, name, price }, dan getDish(slug) mencari satu objek berdasarkan slug.
- Di
app/page.jsx, jadikanHomefungsiasyncdan gunakanawait getDishes()untuk mengisi variabeldishes. - Di dalam
<ul id="dish-list">, tampilkan satu<li>untuk setiap hidangan, dengankey={dish.id},id={dish.id}, dannamehidangan sebagai teksnya. app/menu/[slug]/page.jsxmenampilkanUnknown dishuntuk setiap URL: file itu mengambilparamstanpa menunggu hasilnya. Gunakan await padaparamsagar pencarian mendapatkan slug yang sebenarnya. Saat mengunjungi/menu/carbonara,Carbonaraharus ditampilkan di#dish-namedan harganya di#dish-price.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing5Data di Server
Komponen AsinkronMenunggu Parameter RouteDua Pengambilan Data SekaligusStatus PemuatanMenangani errorRingkasan Pengambilan Data