O Next tem um gerenciamento de rotas nativo, onde cada pasta ou arquivo(pagina) é exportada e acaba sendo associada a uma rota com base no seu nome.

Ex: se você criar pages/home.jsx o React vai exportar uma rota acessível para /home.

Páginas com Rotas dinâmicas

No Next podemos ter esse dinamismo nas páginas de maneira simples, basta colocarmos [ ] entre o nome do arquivo que vamos deixar dinâmico, assim a rota vai aceitar qualquer path que passarmos.

Ex: pages/post/[id].jsx , assim ele ficará acessível para passarmos no path post/1, post/2 e assim por diante.

Mas isso não funciona somente como os arquivos, podemos ter pastas dinâmicas também, onde passamos da seguinte forma [posts]/id.jsx, assim podemos passar post/id, comment/id, etc.

Pré-Render

Por padrão, o Next pré-renderiza todas as páginas, ou seja, ele gera o HTML para cada página com antecedência, em vez de ter tudo feito pelo JavaScript do lado do cliente. A pré-renderização pode resultar em melhor desempenho e SEO.

Cada HTML gerado é associado ao código JavaScript mínimo necessário para essa página. Quando uma página é carregada pelo navegador, seu código JavaScript é executado e torna a página totalmente interativa. (Este processo é chamado de hidratação.)

O Next tem duas forma de Pré-Render, que são:

• Static Generation : O HTML é gerado no momento da construção e será reutilizado em cada solicitação.
• Server-side Rendering : O HTML é gerado em cada solicitação

Mas podemos usar as duas formas se for necessário em nossa aplicação e tornar uma aplicação hibrida em relação a pré-render de páginas.

A recomendação é de que seja usada uma Static Generation do lado do servido, por questões de desempenho, porque as paginas geradas estaticamente podem ser armazenadas no cache pelo CDN sem nenhuma configuração extra.