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 está bloqueado: getDishes() retorna uma promise para um array de objetos { id, name, price }, e getDish(slug) busca um único objeto.
- Em
app/page.jsx, transformeHomeem uma funçãoasynce useawait getDishes()para atribuir o resultado a 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 todas as URLs: ele desestruturaparamssem aguardá-lo. Aguardeparamspara que a busca receba um slug real. Acessar/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