Next.js é uma estrutura React para renderização do lado do servidor, que seus criadores apresentam como uma cadeia de ferramentas de comando único de configuração zero para aplicativos React.
Esta moldura fornece uma estrutura comum que permite criar facilmente um aplicativo de front-end React e gerencia de forma transparente a renderização do lado do servidor. A versão 9.3 do Next.js foi lançada nesta segunda-feira com novos recursos e algumas melhorias, das quais podemos encontrar a capacidade de gerar sites estáticos como a principal novidade.
O que há de novo no Next.js 9.3?
Com o lançamento do Next.js 9.0, a estrutura introduziu o conceito de otimização automática estática. Quando um a página não tem requisitos de bloqueio recuperação de dados como getInitialProps, irá renderizar automaticamente em HTML uma vez que foi construído.
Existem outros casos em que você pode querer fazer uma página em HTML estático em tempo de compilação, mesmo com o bloqueio dos requisitos de extração de dados. É o caso, por exemplo, das páginas de marketing alimentado por um sistema de gerenciamento de conteúdo (CMS).
Next.js 9.3 apresenta dois novos métodos de recuperação de dados: getStaticProps e getServerSideProps.
Esses novos métodos eles têm muitas vantagens sobre o modelo getInitialPropspois há uma distinção clara entre o que se tornará SSG (Static Side Generation) e SSR (Server Side Rendering). Eles são adições de API.
Todos os novos recursos são compatíveis com versões anteriores e pode ser adotado gradualmente. Não há depreciação e getInitialProps continua a funcionar normalmente. Um parâmetro getStaticPaths foi adicionado para obter o roteamento dinâmico.
- getStaticProps: permite obter dados durante a construção;
- getStaticPaths - Especifique o roteamento dinâmico baseado em dados;
- getServerSideProps: permite que você obtenha dados para cada solicitação.
Outra mudança que se destaca nesta nova versão é o suporte para o modo de visualização. Apresentando getStaticProps em Next.js abre novas possibilidades, como o uso de recursos de renderização Next.js sob demanda sob certas condições.
Por exemplo, o ao visualizar um rascunho Em um CMS, você vai querer pular a renderização estática e renderizar página sob demanda com conteúdo de rascunho em vez do conteúdo publicado. Você deseja que o Next.js ignore a construção estática apenas neste caso específico. De acordo com a equipe Next.js, o modo de visualização permite que você faça isso.
O modo de visualização permite aos usuários pular a página gerada estaticamente para retornar mediante solicitação (SSR) uma página de rascunho, por exemplo, de um CMS. No entanto, não se limita a determinados sistemas CMS. O modo de visualização se integra diretamente com getStaticProps e getServerSideProps para que possa ser usado com qualquer tipo de solução de recuperação de dados.
Next.js 9.2 adicionou suporte para CSS integrado, mas Next.js 9.3 adicionou suporte para Sass. Folhas de estilo globais e módulos CSS são suportados, bem como CSS incorporado. Next.js agora oferece suporte a módulos CSS com arquivos Sass usando a convenção de nomenclatura de arquivo [nome] .module.scss. Ao contrário do suporte anteriormente disponível em Next.js 5+ com next-sass, os módulos Sass e CSS globais agora podem coexistir.
Módulos CSS permite que você gerencie o Sass localmente, criando automaticamente nomes de classe exclusivos.
Com a versão 9.0 do Next.js, havia uma página que não foi renderizada automaticamente em HTML estático: 404 página.
A principal razão por trás disso é que a página de erro que alimenta o 404 foi tratada mais que a 404. Por exemplo, ela também lidou com erros. Como as páginas 404 são renderizadas para caminhos inexistentes, renderizar a página sob demanda pode levar a custos mais altos e carregamento mais alto do servidor. A versão 9.3 do Framework melhora as coisas e oferece otimização estática automática para 404 páginas.
Agora, quando sua solicitação não inclui uma página personalizada error.js, o arquivo Next.js gera automaticamente a página 404 estaticamente e o usa quando um 404 deve ser veiculado. Isso acontece automaticamente e nenhuma alteração é necessária.
Você também pode personalizar esta página. Para substituir a página 404 padrão, você pode criar um arquivo 404.js.
Se você quiser saber mais sobre isso, pode consultar o seguinte link.