Recapitulação: Roteamento
Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 10 de 47.
Desafio
MédioRecapitulação do capítulo: transforme um aplicativo de uma página em um pequeno site, usando tudo deste capítulo.
- Em
app/about/page.jsx(já presente na lista de arquivos), faça o componente retornar um<h1>comid="about-title"e o texto exatoAbout us. - Em
app/page.jsx, importeLinkdenext/linke adicione um link para/aboutcomid="to-about". - A rota dinâmica
app/menu/[slug]/page.jsxjá está presente, mas sempre exibepizza. Torne o componenteasyncpara que aguardeparamse renderize oslugcorrespondente dentro de um<h1>comid="dish".
Os testes clicam no seu link, depois visitam dois pratos diferentes e esperam dois títulos diferentes.
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: Roteamento