Paso 3: Páginas de platillos
Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 41 de 47.
Desafío
IntermedioDale a cada plato una página.
- En
app/page.jsx, envuelve el contenido de cada tarjeta en un<Link>conid={'link-' + dish.slug}yhref={'/menu/' + dish.slug}. - Crea
app/menu/[slug]/page.jsx:const { slug } = await params;, despuésawait getDish(slug). - Si no hay ningún plato, llama a
notFound()desdenext/navigation. - De lo contrario, renderiza un
<article className="detail">con un<div id="dish-thumb" className="detail-thumb">(emoji + estilo de gradiente), y junto a él un<h1 id="dish-name">,<p id="dish-stars" className="stars">mostrando'★'.repeat(dish.rating),<p id="dish-desc">, y<span id="dish-price" className="price">. - Crea
app/menu/[slug]/not-found.jsxcuyo elemento exterior tengaid="dish-missing"yclassName="empty".
Pruébalo tú mismo
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</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: Enrutamiento5Datos en el servidor
Componentes asíncronosEspera de parámetros de rutaDos peticiones a la vezEstados de cargaManejo de erroresResumen: Obtención de datos8Proyecto: Coddy Eats
Paso 1: El Shell
Paso 2: La cuadrícula del menúPaso 3: Páginas de platillosPaso 4: Estado de cargaPaso 5: Títulos de páginaPaso 6: Añadir al carritoPaso 7: Filtro por categoríaPaso 8: Dejar una reseñaPaso 9: Búsqueda en vivo