Rotas Aninhadas

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

Agora faça você mesmo. Adicionar uma página a um app Next.js exige dois passos: criar uma pasta e colocar um page.jsx dentro dela.

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

Esse é o arquivo inteiro. Nenhuma tabela de rotas para atualizar, nenhum import em outro lugar, nada para reiniciar. O componente é React comum. A única coisa que o transformou em uma URL foi onde você o salvou.

Dois detalhes que valem a pena memorizar:

Deve ser uma exportação padrão (default export): é assim que o Next.js escolhe o componente da página dentro do arquivo.
O nome do componente é seu. 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, o que é o objetivo.

Desafio

Iniciante

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

Crie o arquivo app/about/page.jsx.
Faça o default-export de um componente a partir dele.
Ele deve retornar um <h1> com id="about-title" e o texto exato About us.

Deixe o app/page.jsx como está: 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>
    );
}