O NextJS é uma ferramenta incrível pra quem quer desenvolver páginas web tanto estáticas, quanto dinâmicas, mas entender exatamente o que ele é, e como funciona a base dele foi um processo que, para mim, nos primeiros passos que dei no Front-end em geral, me tomou um tempo para entender.

Pra quem está começando a pesquisar essa ferramenta, vamos a primeira pergunta que fiz:

O que é o NextJS?

Em resumo, o NextJS é uma library de React, que por sua vez é uma library de Javascript. Parece um pouco com aquele filme, Inception. Mas beleza, o que significa ser uma library de React?

Em resumo, ele é uma ferramenta que te trás um pacote de soluções que vão te dar mais velocidade e performance na hora de criar sua aplicação Front-End usando o React.

Beleza, quais são essas ferramentas?

Aqui, no meu primeiro contato, valeu muito a pena entender os 4 seguinte conceitos dele:

• A estrutura da aplicação é diferente do React padrão e, na minha opinião, mais simples
• A maneira que ele lida com rotas (bicho, isso aqui é muito bom ❤️)
• A possibilidade de renderizar uma página no servidor, no ato do deploy, ou no cliente - O React Vanilla somente renderiza a página no browser do cliente, então ter outras possibilidades é muito legal
• Componentes prontos para a otimização de elementos do seu site, como o Image, o Link, o Script, e alguns outros mais

Estrutura da Aplicação

Vamos exemplificar esse daqui com as pastas que o projeto desse blog possui.

Super simples e objetivo. A maior parte do que você vai criar vai ficar na pasta app, e lá dentro você vai montar suas rotas.

A pasta components criamos para criar os componentes que se repetiam dentro das páginas principais. N colocamos essa página dentro de app para não gerar rotas desnecessárias na aplicação.

O nosso public é onde vamos deixar todo conteúdo de imagens, vídeos, ícones e etc que usaremos na aplicação. Esse aqui é igual ao que temos no React vanilla.

E as rotas?

A maneira de o NextJS trabalha com rotas é a seguinte: Você organiza sua página em pastas dentro da pasta app da sua aplicação, e suas rotas estão prontas. 🍷🗿

Pra quem já trabalhou com React Router, isso aqui é o paraíso kkkk

Olha só a estrutura desse blog que vos escreve

Aqui, cada pasta é uma rota, e o arquivo page.tsx (ou page.jsx, ou .js, do jeito que você preferir trabalhar) é a página principal daquela rota que você acessou. Exemplo:

O caminho app/blog/page.tsx é a rota de: https://naranja-blog.vercel.app//blog

Tá pronto. Muito fácil.

Se você tem uma mesma página e vai ser usada pra diversos conteúdos, como é o exemplo da página de leitura dos posts desse blog (o mesmo layout recebe props diferentes, que montam as páginas que vocês estão acessando, a depender da rota que tomam aqui no blog), criamos uma pastinha com colchetes entre o nome dela, como é o caso da [slug].

Quando a pasta está entre colchetes, ela não aparece na rota da aplicação, mas sinaliza pro Next que aquele layout vai ser usado para diferentes páginas, se baseando na função generateStaticParams, que falamos aqui neste post: https://naranja-blog.vercel.app/post/como-o-nextjs-lida-com-rotas-dinamicas

O básico de rotas do Next é isso, e assim seguimos.

A possibilidade de renderizar uma página no servidor

Isso aqui merece um post dedicado, mas basicamente é a possibilidade de renderizar sua página no servidor e enviar um HTML puro pro cliente quando isso estiver finalizado.

Todos os fetches para gerar determinada página são feitos no servidor, que envia o conteúdo recebido pro cliente através de um HTML super leve. Isso melhora a performance da página por reduzir (e muito) a quantidade de Javascript que vai pro cliente.

Além disso, você pode renderizar todas as páginas na hora de realizar o deploy da aplicação, que gera ainda mais performance para a sua aplicação, que envia somente um HTML simples pro cliente no ato da requisição da página. Essa aqui é a forma que realizamos a renderização deste blog, e pode ser muito interessante para páginas de vendas, por exemplo (performance de página é dinheiro nessas situações).

Componentes prontos do próprio Next para otimização.

Aqui temos, como já falamos, o Link, Image, Script, e outros. Com eles, você deixa de usar elementos HTML comuns para determinados elementos da página e usa os que o Next te oferece, com o objetivo de atingir uma maior performance da aplicação.

Se sua página possui uma imagem, em vez de utilizar o <img>, usamos o <Image> do next, e assim por diante. E isso te gera uma melhor performance de carregamento de página.

Conclusão

O NextJS é um novo mundo que tem uma carinha do mundo do React, que já conhecemos. É uma ferramenta fantástica e, pra você que já dominou o React e está buscando uma nova ferramenta pro seu dia a dia de trabalho, recomendo o Next de olhos fechados pra você. Ele tem concorrentes legais, mas poder fazer o deploy dos seus projetos utilizando o Vercel, que é literalmente o criador do Next, é uma mão na roda que pesa muito na hora de escolher qual caminho seguir na sua jornada Front-end.