E aí, programador! o/
Nessa aula vamos conhecer o Next.js e entender o que ele tem de tão especial.
Segundo o próprio site do Next.js, ele é “O Framework React para Produção”. Isso significa que ele é um framework que utiliza a biblioteca React, mas que se propõe a te fornecer tudo o que você precisa para ter uma aplicação sólida rodando em produção. Isso te poupa do trabalho de ter que incluir manualmente alguns pacotes que acabam sendo essenciais para qualquer projeto sério. Como o React é uma biblioteca bem enxuta, ele não trás consigo recursos como um router, otimização de imagens, renderização do lado do servidor e outras coisas mais que, como vamos ver, já estão presentes em todo projeto Next.js out-of-the-box.
O Next.js possui um conjunto de componentes prontos para as mais variadas otimizações. Vejamos alguns deles a seguir:
O Next.js possui um sistema de rotas muito intuitivo baseado no sistema de arquivos, ou seja, cada arquivo criado dentro da pasta “pages” é automaticamente associado a uma rota de mesmo nome. Ele também permite criar rotas aninhadas através de pastas, por exemplo, uma pasta “blog” contendo um arquivo post-inicial.js estaria associado a rota “/blog/post-inicial” automaticamente.
O sistema de rotas também permite o uso de rotas dinâmicas, contendo parâmetros em sua url. Isso é possível através do uso de colchetes no nome dos arquivos, o que indicará para o Next.js que o termo dentro dos colchetes será uma parâmetro da rota e deve estar disponível para ser manipulado dentro do componente. Ou seja, se criássemos um arquivo [id].js teríamos uma rota dinâmica utilizando o parâmetro id.
E o Next.js permite trabalhar com tudo isso através do objeto “router”, que pode ser acessado em um componente através do hook “useRouter()”.
Outro recurso incrível do Next.js é a possibilidade de criar rotas de API dentro do projeto, e isso também é extremamente simples. Uma rota de API é uma rota que não retorna uma página HTML, mas funciona como um endpoint de API, podendo retornar respostas com JSON, por exemplo. E para criar uma rota assim basta utilizar o mesmo conceito das páginas, porém criando arquivos dentro da “api” na pasta “pages”. Cada arquivo na pasta “api” será associado com um endpoint no caminho “/api/endpoint”.
Talvez os recursos mais conhecidos do Next.js, as diferentes formas de renderização disponíveis são muito importantes. Tradicionalmente em aplicações React todo o conteúdo da página é gerado no lado do cliente após o carregamento de um HTML básico. Isso sempre representou um grave problema de SEO para páginas utilizando React, o que as vezes pode ser irrelevante, como em um dashboard privado, mas também pode ser crucial para determinados casos, como blogs ou e-commerces. Para resolver esse problema o Next.js fornece duas opções, a renderização do lado do servidor, utilizada tradicionalmente na web por frameworks full-stack como Rails, Django e Laravel junto com motores de template, ou a construção completa de um HTML estático contendo todo o conteúdo da página durante o build da aplicação.
Com isso é possível termos páginas amigáveis ao SEO ao mesmo tempo que trabalhamos com o React e todo o seu ecossistema. Além disso, no caso das páginas estáticas, temos também um ganho enorme em desempenho e segurança, pois páginas estáticas não estão ligadas a um servidor back-end e podem ser facilmente cacheadas por uma CDN, por exemplo.