Recapitulação: Layouts
Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 16 de 47.
Desafio
MédioRecapitulação do capítulo: dê ao Coddy Eats sua estrutura base: uma navegação compartilhada e títulos reais para as abas.
- Em
app/layout.jsx, dentro de<body>e acima de{children}, adicione uma tag<nav>comid="nav"contendo um<Link>para/comid="home-link"e o textoHome, e um<Link>para/menucomid="menu-link"e o textoMenu. - Ainda no layout, altere o título de
metadatapara exatamenteCoddy Eats. - Em
app/menu/page.jsx, exporte um objetometadatacom o títuloOur Menu, para que a aba do menu seja renomeada.
Os testes leem o título da aba em ambas as páginas e verificam se a navegação permanece visível após ir para /menu.
Experimente você mesmo
import './globals.css';
import Link from 'next/link';
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: Roteamento
3Layouts e Metadados
O Layout RaizNavegação CompartilhadaLayouts AninhadosMetadados da PáginaMetadados DinâmicosRecapitulação: Layouts