Recapitulación: Diseños
Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 16 de 47.
Desafío
IntermedioResumen del capítulo: dale a Coddy Eats su estructura básica: una navegación compartida y títulos de pestaña reales.
- En
app/layout.jsx, dentro de<body>y arriba de{children}, añade un<nav>conid="nav"que contenga un<Link>hacia/conid="home-link"y el textoHome, y un<Link>hacia/menuconid="menu-link"y el textoMenu. - Aún en el layout, cambia el título de
metadataexactamente aCoddy Eats. - En
app/menu/page.jsx, exporta un objetometadatacon el títuloOur Menu, para que la pestaña del menú tenga su propio nombre.
Las pruebas leen el título de la pestaña en ambas páginas y verifican que la navegación siga ahí después de ir a /menu.
Pruébalo tú mismo
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>
);
}Todas las lecciones de Esenciales de Next.js
2Enrutamiento y enlaces
Las carpetas son rutasRutas anidadasEnlaces entre páginasRutas dinámicasPáginas no encontradasRecapitulación: Enrutamiento
3Diseños y Metadatos
El diseño raízNavegación compartidaDiseños anidadosMetadatos de la páginaMetadatos dinámicosRecapitulación: Diseños