Tema 2
Páginas e Navegação no Next.js
Vamos lá!
No Next.js, a criação de páginas e a navegação entre elas são geridas automaticamente pelo App Router, um sistema de routing baseado em ficheiros. Em vez de configurar rotas manualmente, a estrutura dos ficheiros e diretórios define os endereços (URLs) da aplicação.
Esta abordagem torna a navegação intuitiva e rápida, eliminando a necessidade de bibliotecas de routing externas como o React Router.
Introdução
A regra fundamental no App Router é: uma pasta define um segmento de URL, e um ficheiro page.js (ou .jsx, .ts, .tsx) define a página principal desse segmento.
Para a página inicial, o ficheiro page.js é colocado diretamente na pasta app/. O URL correspondente é /.
Para outras páginas, cria-se uma pasta com o nome do segmento de URL e, dentro dela, um ficheiro page.js.
Exemplos
src/app/sobre/page.js
src/app/page.js
src/app/servicos/page.js
Cada um destes ficheiros deve exportar, por predefinição, um componente React que representa a respetiva página.
Criar Páginas
Para efetuar a navegação entre páginas no Next.js, não se devem utilizar as etiquetas <a> do HTML. A sua utilização provoca o recarregamento completo da página, eliminando os benefícios de desempenho de uma Single Page Application (SPA).
Em alternativa, deve ser importado e utilizado o componente <Link> de next/link. Este componente carrega automaticamente a página de destino em segundo plano (pre-fetching), assegurando uma transição imediata quando o utilizador seleciona a ligação.
Navegação com <Link>
Uma das maiores vantagens do App Router são os layouts partilhados. Um layout é uma UI que é comum a várias páginas. No Next.js, um ficheiro layout.js define o layout para as rotas dentro da respetiva pasta.
O ficheiro src/app/layout.js é o layout raiz. Ele envolve todas as páginas da aplicação.
Podem ser criados layouts aninhados. Por exemplo, um layout na pasta dashboard/ aplica-se apenas às rotas /dashboard/*. Esse layout aninhado é, por sua vez, envolvido pelo layout raiz.
Exemplo de Layout Aninhado:
Layouts Partilhados
App Router: O sistema de routing do Next.js, baseado em ficheiros, que usa a pasta app/ para definir as rotas da aplicação.
page.js: Um ficheiro especial que define um componente de página e o torna acessível através de uma URL.
layout.js: Um ficheiro especial que define uma UI compartilhada para uma rota e os seus segmentos filhos.
<Link>: Um componente do Next.js usado para navegar entre páginas internas, prevenindo recarregamentos completos e melhorando o desempenho.
Pre-fetching: O processo em que o Next.js carrega o código para uma rota em segundo plano, antes de o utilizador a visitar, para tornar a navegação instantânea.
Single Page Application (SPA): Uma aplicação web que carrega uma única página HTML e atualiza o conteúdo dinamicamente, sem recarregar a página.
Routing: O processo de determinar como a aplicação responde a um pedido de URL.
Glossário
Com o App Router, a criação de páginas e a navegação são intrinsecamente ligadas à estrutura de ficheiros e diretórios. A utilização de page.js para definir as páginas, de <Link> para a navegação interna e de layout.js para a interface partilhada constitui o conjunto de práticas essenciais que assegura uma aplicação rápida e facilmente escalável.
Conclusão
Tema 2
Páginas e Navegação no Next.js
Finalizado
Num cenário com uma secção de blog, o respetivo layout pode incluir uma barra lateral específica.
Este layout blog/layout.js irá envolver todos os ficheiros page.js dentro da pasta blog/ (por exemplo, blog/page.js e blog/artigo-1/page.js), mas ele próprio será envolvido pelo layout raiz da aplicação.
T2
Campus elearning
Created on October 28, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Course
View
Practical Course
View
Course 3D Style
View
Customer Service Course
View
Dynamic Visual Course
View
Dynamic Learning Course
View
Akihabara Course
Explore all templates
Transcript
Tema 2
Páginas e Navegação no Next.js
Vamos lá!
No Next.js, a criação de páginas e a navegação entre elas são geridas automaticamente pelo App Router, um sistema de routing baseado em ficheiros. Em vez de configurar rotas manualmente, a estrutura dos ficheiros e diretórios define os endereços (URLs) da aplicação.
Esta abordagem torna a navegação intuitiva e rápida, eliminando a necessidade de bibliotecas de routing externas como o React Router.
Introdução
A regra fundamental no App Router é: uma pasta define um segmento de URL, e um ficheiro page.js (ou .jsx, .ts, .tsx) define a página principal desse segmento.
Para a página inicial, o ficheiro page.js é colocado diretamente na pasta app/. O URL correspondente é /.
Para outras páginas, cria-se uma pasta com o nome do segmento de URL e, dentro dela, um ficheiro page.js.
Exemplos
src/app/sobre/page.js
src/app/page.js
src/app/servicos/page.js
Cada um destes ficheiros deve exportar, por predefinição, um componente React que representa a respetiva página.
Criar Páginas
Para efetuar a navegação entre páginas no Next.js, não se devem utilizar as etiquetas <a> do HTML. A sua utilização provoca o recarregamento completo da página, eliminando os benefícios de desempenho de uma Single Page Application (SPA).
Em alternativa, deve ser importado e utilizado o componente <Link> de next/link. Este componente carrega automaticamente a página de destino em segundo plano (pre-fetching), assegurando uma transição imediata quando o utilizador seleciona a ligação.
Navegação com <Link>
Uma das maiores vantagens do App Router são os layouts partilhados. Um layout é uma UI que é comum a várias páginas. No Next.js, um ficheiro layout.js define o layout para as rotas dentro da respetiva pasta.
O ficheiro src/app/layout.js é o layout raiz. Ele envolve todas as páginas da aplicação.
Podem ser criados layouts aninhados. Por exemplo, um layout na pasta dashboard/ aplica-se apenas às rotas /dashboard/*. Esse layout aninhado é, por sua vez, envolvido pelo layout raiz.
Exemplo de Layout Aninhado:
Layouts Partilhados
App Router: O sistema de routing do Next.js, baseado em ficheiros, que usa a pasta app/ para definir as rotas da aplicação.
page.js: Um ficheiro especial que define um componente de página e o torna acessível através de uma URL.
layout.js: Um ficheiro especial que define uma UI compartilhada para uma rota e os seus segmentos filhos.
<Link>: Um componente do Next.js usado para navegar entre páginas internas, prevenindo recarregamentos completos e melhorando o desempenho.
Pre-fetching: O processo em que o Next.js carrega o código para uma rota em segundo plano, antes de o utilizador a visitar, para tornar a navegação instantânea.
Single Page Application (SPA): Uma aplicação web que carrega uma única página HTML e atualiza o conteúdo dinamicamente, sem recarregar a página.
Routing: O processo de determinar como a aplicação responde a um pedido de URL.
Glossário
Com o App Router, a criação de páginas e a navegação são intrinsecamente ligadas à estrutura de ficheiros e diretórios. A utilização de page.js para definir as páginas, de <Link> para a navegação interna e de layout.js para a interface partilhada constitui o conjunto de práticas essenciais que assegura uma aplicação rápida e facilmente escalável.
Conclusão
Tema 2
Páginas e Navegação no Next.js
Finalizado
Num cenário com uma secção de blog, o respetivo layout pode incluir uma barra lateral específica.
Este layout blog/layout.js irá envolver todos os ficheiros page.js dentro da pasta blog/ (por exemplo, blog/page.js e blog/artigo-1/page.js), mas ele próprio será envolvido pelo layout raiz da aplicação.