Fala pessoal, tudo bem? Recentemente, a equipe do Next declarou o novo diretório App do Next 13 como estável, e o mesmo, saiu da versão beta. Ele traz consigo muitas novidades, como componentes que executam no lado do servidor por padrão, um arquivo de layout para várias páginas, uma página de carregamento nativa na sua aplicação, entre outros recursos. Neste artigo, abordarei as principais mudanças neste diretório App, algumas outras mudanças “menores” do Next 13 e como você pode começar a usar esse novo diretório hoje mesmo.

Como era antes?

A maioria dos usuários sempre elogiou a maneira como o Next lida com as rotas das aplicações de forma nativa. Basicamente, tudo o que é necessário fazer é criar um novo arquivo que retorna um HTML e o Next se encarrega do resto, criando páginas com o mesmo nome do arquivo criado:

Dessa forma, uma nova página seria criada na minha aplicação, e mesma poderia ser acessada por “http://localhost:3000/teste”.

O que mudou?

Embora a nomenclatura e a forma como funciona sejam semelhantes ao que era antes, é importante destacar alguns pontos. Por exemplo, como replicar a mesma página no novo diretório App? Para isso, a pasta que irá rotear as páginas e layouts agora é nomeada pelo Next como “app”, e não mais “pages”. Dessa forma, se um arquivo “page.tsx” for criado dentro dessa pasta, ele será retornado como a página raiz do projeto. A famosa rota”/” (http://localhost:3000/) é assim transformada em:

Agora, toda nova página é gerada a partir de um arquivo chamado “page”. Esse arquivo funciona como qualquer outra página, podendo retornar HTMLs, criar funções, etc. Mas o que é o arquivo “layout”? Certamente você se lembra do arquivo “index”, que costumava estar dentro da pasta “pages” em seu projeto Next. Agora, todo o roteamento de “childrens”, que são injetados no HTML, se encontra lá. Esse roteamento é feito por camadas, então o arquivo “layout”, localizado na pasta raiz “app”, será aplicado a todas as outras páginas da aplicação. Isso significa que, se você deseja, por exemplo, que um componente seja renderizado em todas as rotas da sua aplicação, basta colocá-lo lá.

Mas então, como fica para finalmente replicar a página “teste” para o novo diretório “app”? Pois bem, para isso é preciso criar um sub diretório, onde cada um desses, se transformam em uma nova rota. E cada nova rota, também pode ter seu respectivo layout:

Um pouco mais sobre os layouts

Se você reparou bem, percebeu que na página de teste, além do teste “teste”, foi renderizado o componente que “Test”, que está sendo renderizado nele também. Isso acontece porque, como esse componente é chamado no layout que se encontra na raiz do projeto, ele vai ser replicado para todas as páginas, independente do repositório dela. Então, se eu quiser um componente que só vai ser renderizado no diretório de teste? Para isso, você precisa chamar o componente dentro do layout criado no repositório teste:

Lembra de exportar a função com um outro nome sem ser “RootLayout”, pois, caso o nome seja esse o Next vai entender que esse é o layout raiz e vai começar a dar problema, pois, vão haver dois layouts raiz. Agora, importando nele um componente, temos o seguinte:

Note que, se caso eu volte para a rota raiz, o componente já não vai mais ser renderizado:

Conclusão

Essa foi uma das mudanças que o Next 13 trouxe. Essa mudança acabou sendo de bom agrado, pois, não só ela promete deixar as páginas e componentes da aplicação mais flexíveis, como também, um pouco mais organizadas, pois, nem todo arquivo dentro da pasta “app” precisa ser uma página. Esse último ponto era uma certa dor de cabeça em relação a “antiga” pasta pages. Sendo assim, agora fique a vontade para testar esse novo diretório também, que com certeza, vai mudar cada vez mais como pensamos em aplicações frontend.