Krok 1: Szkielet

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

Wyzwanie

Łatwy

Zbuduj szkielet w app/layout.jsx.

Zaimportuj ./globals.css oraz Link z next/link.
Wyeksportuj metadata z obiektem title: default ustawionym na Coddy Eats i template ustawionym na %s | Coddy Eats.
Wewnątrz <body> dodaj element <nav className="nav"> zawierający trzy linki: className="brand" prowadzący do / z tekstem Coddy Eats, id="nav-menu" prowadzący do / z tekstem Menu oraz id="nav-desserts" prowadzący do /?category=dessert z tekstem Desserts.
Poniżej elementu nav umieść {children} wewnątrz <div className="container">.

Spróbuj swoich sił

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