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
Basic Interactive Course
View
Course 3D Style
View
Minimal Course
View
Neodigital CPD Course
View
Laws and Regulations 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.