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 página única em um site pequeno, usando tudo deste capítulo.
- Crie
app/about/page.jsx. Exporte pordefaultum componente que retorna um<h1>comid="about-title"e o texto exatoAbout us. - Em
app/page.jsx, faça oimportdeLinkdenext/linke adicione um link para/aboutcomid="to-about". - Crie a rota dinâmica
app/menu/[slug]/page.jsx: um componenteasyncque aguarda (await)paramse renderiza oslugcorrespondente dentro de um<h1>comid="dish".
Os testes clicam no seu link e, em seguida, 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