Eai galera, tudo bem? Vamos falar hoje sobre o Next.js, um framework React.
Bora lá?
Next.js é um framework React com foco em produção e eficiência criado e mantido pela equipe da Vercel, o Nextjs busca reunir diversas funcionalidades como renderização hibrida e estática de conteúdo, suporte a TypeScript, pre-fetching, sistema de rotas, pacotes de funcionalidades e diversos plugins e exemplos para acelerar seu desenvolvimento fornecendo uma estrutura completa para você iniciar seu projeto.
O Next.js é um framework de código aberto hospedado no github sob a licença MIT. Veja quem está utilizando o Next.js e tendo um bom crescimento no mercado.
Com todas essas facilidades pré-configuradas ele se assimila a um create react app onde você inicia o projeto muito rápido e sem preocupação com configurações de webpack, estruturas de pastas, configuração de rotas e etc.
pages, então qualquer arquivo nesta pasta se torna uma página, sem a necessidade de uma configuração extra. (é possível personalizar isto caso precise)O grande diferencial no começo do Next.js foi a possibilidade de utilizar a renderização na parte do servidor (SSR) isto resolve um problema em aplicações e sites construídos com React que necessitam principalmente de SEO. Em algumas aplicações React você acabará percebendo que nem sempre é eficiente carregar todo o conteúdo na parte do cliente (client-side) que é o padrão do React. Atualmente o Next js consegue trabalhar de forma hibrida com SSG e SSR.
É bem simples iniciar um projeto com o Next.js, a forma mais rápida é utilizando:
npx create-next-app
# ou
yarn create next-appApós executar um dos comandos acima será solicitado que você informe o nome de seu projeto e o restante será executado automaticamente. Depois que concluir a instalação basta acessar a pasta de seu projeto e executar npm run dev ou yarn run dev para iniciar o ambiente de desenvolvimento no endereço localhost:3000.
Você terá um projeto com alguns exemplos e uma estrutura do Next.js configurado. Experimente. Lembrando que para executar os comandos é necessário que você tenha o Node.js instalado em sua máquina e um gerenciador de pacotes como npm ou yarn.
Caso queira se aprofundar em mais funcionalidades recomendo verificar o passo a passo disponibilizado na documentação.
O Next.js já faz bastante coisa mas sempre tem algum pacote que pode ser útil para dar aquele up no desenvolvimento, vou indicar alguns que já utilizei/utilizo e que me ajudam bastante:
Analisando o gráfico de download da npm trends, podemos perceber o número gigantesco de pessoas interessadas no NextJS no último ano.
Essa crescente interesse não é à toa, ela surge por causa das soluções que o NextJS oferece em relação a todo ecossistema JavaScript, principalmente resolvendo nativamente alguns problemas conhecidos do ReactJS.
No que diz respeito à arquitetura client-side, ou lado do cliente em tradução literal, uma vez que carregamos o conteúdo temos que esperar o pacote que contém todo o JavaScript ou bundle como é conhecido carregar antes de determinar o que mostrar na página. E isso torna o tempo de carregamento mais alto o que acaba virando problema para pessoas com dispositivos móveis antigos e conexões fracas.
Outra questão são os mecanismos de pesquisa (SEO) que ainda tem certa dificuldade para indexação de aplicativos JavaScript do lado do cliente, porque o conteúdo real está embutido em algum lugar do bundle gerado. Além disso os motores de busca estão preparados para pegar o HTML, o conteúdo em muitos casos nem está lá porque ele só é renderizado depois de uma Chamada pro Backend, então seu SEO nesse caso é inexistente.
E como o NextJS lida com esses pontos?
Quando as pessoas perceberam que colocar muito código JavaScript no lado do cliente era um problema, eles pensaram em uma alternativa para renderizar esse código no lado do servidor. E assim surgiu o NextJS um framework criado em cima do ReactJS que usa a renderização do lado do servidor ou Server Side Rendering popularmente conhecido como SSR.
O SSR funciona da seguinte maneira, ao acessarmos um site por exemplo alura.com.br enviamos uma requisição para o servidor para acessar a página inicial do site, então o servidor manda uma requisição para uma rest api por exemplo pedindo essa pagina inicial. Uma vez que os dados são recebidos o servidor renderiza uma página HTML com o conteúdo e envia para o cliente exibindo assim o conteúdo na página, se a pessoa acessar outra rota por exemplo alura.com.br/artigos o processo continua o mesmo.
Utilizando o conceito do SSR continuamos o desenvolvendo com React, o que é bom, porque podemos manter a tecnologia que gostamos e a pessoa que está como visitante do nosso site obtém um documento HTML simples, que no final gera um grande aumento de desempenho. E não é só isso, o NextJS ainda tem outras vantagens.
O NextJS também possibilita a criação de sites estáticos, que são aqueles sites sem muita interação com o usuário, com pouca ou quase nenhuma mudança na interface, por exemplo uma página de venda de um produto que vai ficar no ar por uma semana.
Então nesse caso teríamos todo conteúdo estático e um formulário que seria usado para coletar os dados das pessoas que tem interesse no produto, esse formulário sim precisaria de interação e para isso, na documentação do NextJS é indicado o uso da função getStaticProps.
export async function getStaticProps() {
const res = await fetch('endereço da requisição')
const posts = await res.json()
return {
props: {
posts,
},
}
}Além das opções de SSR e SSG, uma outra vantagem do NextJS é a facilidade de configuração.
Por padrão o NextJS vem com configurações otimizadas e o pessoal da Vercel está sempre atualizando essas configurações pensando em melhorar nossa experiência de desenvolvimento.
Por exemplo, o NextJS oferece suporte a todos os navegadores modernos prontos para uso e para o IE11. Ele tem suporte para divisão de código, ou code splitting enquanto com o create react app combina todos os arquivos JavaScript em um único pacote, com o next quando ao lidar com roteamento, estamos apenas carregando o JavaScript usado naquela página e isso traz um ganho de performance.
Ele já vem com hot reload da aplicação que apenas atualiza os arquivos que foram alterados sem perder o estado do aplicativo. E tratando de aplicações ReactJS, em algum pode ser que precisemos ejetar o create react app para não ter dependências não utilizadas na aplicação e fazer algumas otimizações do webpack/babel.
O próprio create-next-app utilizado para criar aplicações NextJS, é uma alternativa otimizada ao create-react-app e como ele já tem toda essa parte abstraída para gente, não precisamos nos preocupar com babel, webpack e outras configurações que precisamos fazer para otimizar uma aplicação em ReactJS.
Além dessas vantagens de configuração, o NextJS ainda tem várias vantagens no que diz respeito à experiência de desenvolvimento.
Vamos imaginar que você tem um blog com vários artigos. Quando uma pessoa entrar para ler, ela precisa acessar o caminho site.com/novidades/next, e nós queremos exibir o conteúdo daquela rota o mais rápido possível, então você opta por SSG.
Mas é possível que você não queira criar todas as páginas estáticas de uma só vez porque isso levaria muito tempo, ou então não quer uma página completamente estática para sempre, esse é o poder do import dinâmico.
O NextJS vai buscar aquela URL específica e salvar como uma página estática e vai servir estaticamente sempre que alguém visitar o caminho e, ao mesmo tempo, estará aberto para aceitar novos caminhos dinamicamente. Além disso com o parâmetro revalidate, nós podemos especificar a atualização das páginas estáticas uma vez a cada X segundos em segundo plano se houver alguma alteração!
Otimizar imagens e gerar elas com tamanho diferente para termos imagens com qualidade boa em diferentes dimensões sem distorção é um trabalho que todas as pessoas que trabalham com frontend já passaram ou ainda vão passar. Mas o NextJS não nos deixa na mão com essa tarefa, ele disponibiliza um componente imagem:
import Image from 'next/image'
function Home() {
return (
<>
<h1>Meu PetShop</h1>
<Image
src="/doguito.png"
alt="Foto do cachorro mascote do petshop"
width={300}
height={250}
/>
<p>Bem vindo ao Doguito Petshop!</p>
</>
)
}
export default HomeQue vai ser ligado ao otimizador de imagens da vercel que abstrai toda essa tarefa para nós.
O NextJS é bem focado em experiência de quem desenvolve então no que diz respeito a estilo, ele dá suporte para css, Saas e algumas das bibliotecas de CSS in JS mais famosas como o Tailwind CSS e Styled Components.
Fica a seu critério escolher a quem melhor se encaixa no seu projeto.
A empresa Vercel é responsável pelo NextJS, e além do framework, ela construiu todo um ecossistema para que o processo de build e deploy do seu projeto seja simples. Ao integrar a vercel você ganha algumas funcionalidades como por exemplo preview com um link de visualização para cada branch deploy que fizemos.
O NextJS traz por padrão suporte para internacionalização de aplicações, onde você pode usar a estratégia de exibir um conteúdo com uma língua diferente baseado na rota que a pessoa navegar.
Na documentação do next temos o exemplo para trabalhar com a configuração acima, en-US, fr e nl-NL estarão disponíveis para roteamento e en-US.
Tradução de termos e glossário:
Build: Neste caso é a “compilação” do site, esse processo disponibiliza uma pasta com os arquivos prontos para integrar a versão oficial do site. Normalmente é realizado após um comando no terminal como: “next build” – Next JS ou “npm run build” – Create React App.
Static Site Generator (SSG): Gerador de site estático, uma ferramenta que gera arquivos de um site prontos para serem acessados pelo usuário, normalmente sem a necessidade de uma consulta ao servidor.
Search Engine Optimization (SEO): Otimização de um site, estrutura e seu conteúdo para aparecer em posições superiores de buscadores como o Google.
Create React App (CRA): É um facilitador para a criação de sites utilizando a biblioteca React, permite que você inicie um novo projeto em React com o mínimo de configurações.
React: Uma biblioteca JavaScript para criar interfaces de usuário.
Node.js: É um ambiente para execução de códigos JavaScript no lado do servidor (backend)
**npm/yarn: **São gerenciadores de pacotes normalmente utilizados para instalar novos plugins/pacotes em seus projetos.
TypeScript: Superset de Javascript que permite utilizar tipagem estática no Javascript. Escreve em Typescript e compila para Javascript.
Data Fetching: Buscar dados de uma fonte, normalmente um servidor que responde através da API.
Espero que tenham gostado deste post, valeu!
Fontes:
https://segredo.dev/o-que-e-next-js/
Está gostando do conteúdo?
Considere pagar um cafezinho para nossa equipe!
