Recapitulando: Busca de Dados
Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 28 de 47.
Desafio
MédioRecapitulação do capítulo: um menu que carrega tudo no servidor.
lib/data.js é fornecido e bloqueado: getDishes() retorna uma promise para uma array de objetos { id, name, price }, e getDish(slug) busca um único item.
- Em
app/page.jsx, torneHomeuma funçãoasynce façaawait getDishes()em uma variáveldishes. - Dentro de
<ul id="dish-list">, renderize um<li>por prato, comkey={dish.id},id={dish.id}e onamedo prato como seu texto. app/menu/[slug]/page.jsxexibeUnknown dishpara cada URL: ele desestruturaparamssem usar await nele. Use await emparamspara que a busca obtenha um slug real. Visitar/menu/carbonaradeve exibirCarbonaraem#dish-namee seu preço em#dish-price.
Experimente você mesmo
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Todas as lições de Essenciais do Next.js
1Por que usar o Next.js
O que o Next.js adicionaA pasta AppSua primeira páginaRecapitulação: Por que usar o Next.js2Roteamento e Links
Pastas São RotasRotas AninhadasVinculando PáginasRotas DinâmicasPáginas Não EncontradasRecapitulação: Roteamento5Dados no Servidor
Componentes AssíncronosAguardando Parâmetros de RotaDuas Buscas ao Mesmo TempoEstados de CarregamentoTratamento de ErrosRecapitulando: Busca de Dados