Podsumowanie: układy
Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 16 z 47.
Wyzwanie
ŚredniPodsumowanie rozdziału: nadaj Coddy Eats szkielet: wspólny pasek nawigacyjny i prawdziwe tytuły kart.
- W
app/layout.jsx, wewnątrz<body>i nad{children}, dodaj<nav>zid="nav", zawierający<Link>do/zid="home-link"i tekstemHome, a także<Link>do/menuzid="menu-link"i tekstemMenu. - Nadal w layoucie zmień tytuł
metadatadokładnie naCoddy Eats. - W
app/menu/page.jsxwyeksportuj obiektmetadataz tytułemOur Menu, aby karta menu miała własną nazwę.
Testy odczytują tytuł karty na obu stronach i sprawdzają, czy pasek nawigacyjny nadal jest widoczny po przejściu do /menu.
Spróbuj swoich sił
import './globals.css';
import Link from 'next/link';
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
4Serwer i klient
Dwa rodzaje komponentówOdczytywanie błęduLinia „use client”Ograniczaj części klienckieSerwer wewnątrz klientaPodsumowanie: serwer i klient7Nawigacja po stronie klienta
Aktywny linkRouting programowyFiltrowanie za pomocą URLObsługa trasPodsumowanie: nawigacja2Routing i linki
Foldery to ścieżkiZagnieżdżone ścieżkiŁączenie stronDynamiczne ścieżkiStrony nie znalezionoPodsumowanie: routing
3Układy i metadane
Układ głównyWspólna nawigacjaZagnieżdżone układyMetadane stronyDynamiczne metadanePodsumowanie: układy