Rotas Aninhadas

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 6 de 47.

Agora faça isso. Adicionar uma página a um app Next.js envolve dois passos: criar uma pasta e colocar um page.jsx nela.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

Esse é o arquivo inteiro. Não há tabela de rotas para atualizar, nenhuma importação em outro lugar, nada para reiniciar. O componente é um React comum. A única coisa que o transformou em uma URL foi onde você o salvou.

Dois detalhes que vale a pena fixar:

Ele deve ser uma exportação padrão: é assim que o Next.js identifica o componente da página no arquivo.
O nome do componente é você quem escolhe. About, AboutPage, Whatever: a URL vem da pasta, nunca da função.

Quer /about/team também? Crie app/about/team/ e coloque outro page.jsx lá. O padrão não muda à medida que o site cresce, e esse é o objetivo.

Desafio

Iniciante

O aplicativo tem uma página inicial. Dê a ele uma página sobre.

Complete o arquivo app/about/page.jsx.
Exporte um componente como padrão a partir dele.
Ele deve retornar um <h1> com id="about-title" e o texto exato About us.

Não altere app/page.jsx: os testes visitam ambas as URLs.

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>
    );
}