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 um default export: é assim que o Next.js identifica o componente da página no arquivo.
O nome do componente é escolha sua. 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 app tem uma page home. Dê a ele uma page about.

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

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