Etapa 2: A Grade do Menu
Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 40 de 47.
Desafio
FácilPreencha o menu em app/page.jsx.
- Torne
Homeasynce useawait getDishes()de../lib/menu.js. - Mantenha o hero e, depois dele, renderize um
<ul className="grid">com um<li className="card">por dish (key= o slug). - Cada card contém um
<div className="thumb">comid={'thumb-' + dish.slug}, oemojido dish como seu conteúdo estyle={{ background: dish.gradient }}. - Depois um
<div className="card-body">contendo um<h2 className="card-title">comid={'name-' + dish.slug}e o nome, um<p className="card-desc">com a descrição e um<span className="price">comid={'price-' + dish.slug}exibindo$seguido do preço.
Experimente você mesmo
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 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.js