Git e GitHub
Seed a Bit - CLIIntrodução
O roteamento na framework Next é feito de forma simples e eficiente. Abaixo será apresentado como funciona o roteamento e como utiliza-lo de maneira proveitosa.
Como funciona?
O roteamento no Next é chamado de roteamento baseado em diretórios. Isso significa que o Next irá criar rotas baseadas nos arquivos que estão dentro da pasta app. Primeiramente, o Next procurará o seu arquivo page.tsx do seu diretório raiz (app), está será a página carregada na rota /.
E quaisquer outros sub-diretórios dentro de app serão considerados como rotas. Por exemplo, se você criar um diretório chamado about dentro de app, o Next irá criar uma rota chamada /about e irá carregar o arquivo page.tsx dentro do diretório about.
Layouts
Os arquivos layout.tsx servem de esqueleto para as páginas do seu site. Eles são utilizados para definir elementos comuns à páginas do diretório e sub-diretórios em relação ao que está presente.
Aplicações Next já vem com um arquivo layout.tsx padrão no diretório raiz das rotas, esse arquivo é utilizado para definir o layout padrão do site, portanto, esse layout é aplicado em TODAS as páginas do site (inclusive em sub-diretórios). Caso criassemos um sub-diretório chamado about e criassemos um arquivo layout.tsx dentro dele, esse layout seria aplicado apenas nas páginas do diretório e sub-diretórios de about.
Sobre o layout raiz
No layout padrão do nosso sistema de rotas, encontramos algumas coisas que são importantes para o funcionamento do site:
- Componente
Headpara definir o título da página e metadados - Metadados da nossa aplicação
- As fontes da aplicação
Esses são os elementos que são comuns à todas as páginas do site, e são definidos no layout padrão. É importante que esses dados sejam definidos no layout padrão para que todas as páginas do site tenham essas informações.
Rotas Dinâmicas
Rotas dinâmicas são rotas que são geradas dinamicamente a partir de um conjunto de dados. Por exemplo, se você tem um blog e quer criar uma rota para cada postagem, você pode criar um diretório chamado posts e dentro dele criar um arquivo chamado [slug].tsx. O Next irá criar uma rota para cada arquivo dentro do diretório posts e irá passar o valor do slug como parâmetro para a página.
Rotas dinâmicas são muito úteis quando você tem um conjunto de dados que você quer criar uma rota para cada item do conjunto de dados. Elas são muito utilizadas em blogs, e-commerces e sistemas de gerenciamento de conteúdo.
1Veja mais como criar rotas dinâmicas nessa página da documentação do Next.js.
Página não encontrada
Quando uma rota não é encontrada, o Next irá carregar o arquivo not-found.tsx do diretório raiz. Esse arquivo é utilizado para criar uma página de erro 404 personalizada para o seu site.No nosso template, por exemplo, a página não encontrada está com uma página padrão da Seed que é exibida quando uma rota não é encontrada.
É importante que você crie uma página de erro 404 personalizada para o seu site, pois isso irá melhorar a experiência do usuário e dar uma aparência mais profissional ao seu site.