Resumen: Obtención de datos
Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 28 de 47.
Desafío
IntermedioResumen del capítulo: un menú que carga todo en el servidor.
lib/data.js viene proporcionado y bloqueado: getDishes() devuelve una promesa de un array de objetos { id, name, price }, y getDish(slug) busca uno individual.
- En
app/page.jsx, haz queHomesea una funciónasyncy usaawait getDishes()en una variabledishes. - Dentro de
<ul id="dish-list">, renderiza un<li>por plato, conkey={dish.id},id={dish.id}y elnamedel plato como su texto. app/menu/[slug]/page.jsxmuestraUnknown dishpara cada URL: desestructuraparamssin esperarlo conawait. Espera conawaitaparamspara que la búsqueda obtenga unslugreal. Al visitar/menu/carbonaradebe mostrarCarbonaraen#dish-namey su precio en#dish-price.
Pruébalo tú mismo
import './globals.css';
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: Enrutamiento5Datos en el servidor
Componentes asíncronosEspera de parámetros de rutaDos peticiones a la vezEstados de cargaManejo de erroresResumen: Obtención de datos