Podsumowanie: pobieranie danych

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 28 z 47.

Wyzwanie

Średni

Podsumowanie rozdziału: menu, które wczytuje wszystko na serwerze.

lib/data.js jest dostarczony i zablokowany: getDishes() zwraca obietnicę z tablicą obiektów { id, name, price }, a getDish(slug) wyszukuje jeden z nich.

W app/page.jsx ustaw Home jako funkcję async i użyj await getDishes(), aby przypisać wynik do zmiennej dishes.
Wewnątrz <ul id="dish-list"> wyrenderuj jeden element <li> dla każdego dania, z key={dish.id}, id={dish.id} i jego name jako tekstem.
app/menu/[slug]/page.jsx wyświetla Unknown dish dla każdego URL-a: destrukturyzuje params, nie oczekując na jego wartość. Użyj await dla params, aby wyszukiwanie otrzymało prawidłowy slug. Odwiedzenie /menu/carbonara musi wyświetlić Carbonara w #dish-name oraz cenę w #dish-price.

Spróbuj swoich sił

import './globals.css';

export const metadata = {
    title: 'My App',
};

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

Wszystkie lekcje w sekcji Podstawy Next.js

1Dlaczego Next.js

Co dodaje Next.js Folder app Twoja pierwsza strona Podsumowanie: Dlaczego Next.js

4Serwer i klient

Dwa rodzaje komponentów Odczytywanie błędu Linia „use client”Ograniczaj części klienckie Serwer wewnątrz klienta Podsumowanie: serwer i klient

7Nawigacja po stronie klienta

Aktywny link Routing programowy Filtrowanie za pomocą URL Obsługa tras Podsumowanie: nawigacja

3Układy i metadane

Układ główny Wspólna nawigacja Zagnieżdżone układy Metadane strony Dynamiczne metadane Podsumowanie: układy

6Akcje serwerowe

Czym jest akcja serwerowa Formularze, które działają Odczytywanie danych formularza Odświeżanie strony Podsumowanie: akcje serwerowe