[PT-BR] Iniciando em Next.js

Muito se fala do framework Next.js quando o assunto e React.js, caso não conheça, te darei uma introdução do quão fantástico e este framework e seus benefícios para desenvolvimento frontend web.

O que é Next.js?

É um framework web desenvolvido pela Vercel para desenvolvimento frontend React que permite funcionalidades como renderização do lado do servidor e geração de site estático.

Renderização do lado do servidor?

Em um aplicativo React tradicional, todo o aplicativo é carregado e renderizado no cliente. Next.js permite que o carregamento da primeira página seja processado pelo servidor, o que é ótimo para SEO e desempenho, por exemplo se desabilitarmos o Javascript do browser, nada será exibido em uma aplicação com React puro, porem com Next.js você percebera que mesmo desabilitado será renderizado todo App.

Outros benefícios do Next.js

• Roteamento de página fácil

• Rotas Api do servidor

• Geração de site estático

• Fácil implantação

Crie o primeiro projeto Next.js.

Para criar um projeto Next.js, você pode usar o prático comando:

npx create-next-app my-app-next

Next.js existem também, templates prontos assim como há no create-react-app, por exemplo este template com Typescript:

npx create-next-app --example with-typescript with-typescript-app

Para mais templates, acesse o próprio repositório da Vercel no Github.

Iniciando a Aplicação

Criado a estrutura com primeiro comando citado acima, abra o seu terminal e navegue ate a pasta do projeto gerado. Para iniciar o projeto como desenvolvimento, use o script dev.

npm run dev

Acessando seu Localhost na porta 3000, vera sua aplicação em execução.

Entendendo a estrutura de arquivos do Next

Abrindo a pasta do projeto em seu editor de código ou IDE da sua escolha, em meu caso estarei utilizando o Visual Studio Code da microsoft, teremos a seguinte estrutura de pastas:

Nesta estrutura temos 3 pastas pages *| **public *| **styles, sendo “pages” e “public” pastas especiais para o Next, deixe-me explicar melhor como estas duas pastas funcionam.

Roteamento

Com Next não precisamos de uma biblioteca de roteamento, pois cada arquivo dentro da pasta **pages **será tratado como uma pagina.

Vamos brincar com o roteamento do Next criando um novo arquivo chamado home.js e criando um simples componente como código abaixo:

Ao acessar nosso Localhost:3000/home será exibido nosso componente recém criado.

E se quiséssemos rotas como Localhost:3000/profile/home ? para isto, podemos criar subpastas dentro da pasta pages, como no exemplo acima, bastaria criar uma pasta profile **e mover nosso arquivo **home.js **para **profile e acessarmos novamente.

Rotas dinâmicas

Imagine que você tem um blog, e cada postagem possui um arquivo JS, falando de 1 ou 2 ou ate mesmo 3 postagens não seria grande um grande problema, mas, caso esse mesmo blog já tivesse anos de vida com muitas postagens, seria trabalhoso ter tantos arquivos não acha?. Trabalhando Next podemos usar as rotas dinâmicas.

Vamos criar uma pasta **posts **dentro da **pages **e dentro da mesma criarmos um arquivo chamado [slug].js, sim um arquivo com colchetes em seu nome, o nome “slug” entre colchetes não necessariamente precisa ser este, poderia escolher outro, mas, será usado este para este exemplo.

Next nos proporciona o Hook useRouter **que através dele podemos acessar as **query params da nossa rota, veja um exemplo abaixo do uso desse Hook.

Se acessarmos agora por exemplo localhost:3000/posts/20 , será exibido nosso H1 com conteúdo “Post - 20”.

Navegação entre rotas

Entendendo agora com funciona o roteamento provido pelo Next, para navegar entre nossas paginas não devemos usar a Tag e sim um componente Link fornecido pelo próprio Next.
Dentro da rota Profile altere a pagina Home, veja como farei a seguir.

Acessando localhost:3000/profile/home terá um titulo “Hello Next” e logo abaixo nosso link “Go Post 25”. Ao clicar seremos redirecionado para nossa rota Post obtendo Post 25 pois a mesma e uma rota dinâmica. Caso tenha reparado, ao clicar a pagina muda mas não a um carregamento completo pelo navegador.

Ah outra maneira para forçarmos um redirecionamento, usando o Hook useRouter, veja:

Adicionando essa condicional onde apenas podemos ver Posts acima do 10, caso seja inferior seremos redirecionados a pagina inicial (index.js) do Next.

Componente Head

Assim como componente Link, Next fornece a tag de cabeçalho como título ou meta, você precisa usar o componente Head. Vamos adiciona-lo a nossa pagina Home.

Agora nossa pagina Home possui um titulo próprio.

Imagens e Otimização de Imagens

Por padrão, Next consegue servir todos os arquivos contidos na pasta Public, como Imagens, Svgs etc…
Next também nos fornece um componente para otimização automática para imagens, As imagens são carregadas lentamente por padrão sem comprometer a velocidade da pagina. Vamos aplicar este componente a nossa pagina Home.

Neste exemplo usei esta imagem retirada da Wikipedia, apenas basta baixá-la, mover para pasta Public do Next e nomeá-la como NextImage.png.

Pagina 404

Next possui uma pagina para respostas 404 - not found, para checarmos basta tentarmos acessar uma rota que não existe como por exemplo: http://localhost:3000/random

Podemos personalizá-la conforme desejar, basta criarmos dentro da **pages **um arquivo 404.js contendo um simples componente em React.

Server Side Rendering

Bom antes de falarmos de Renderização do lado do servidor, vamos entender como uma aplicação com React que consome uma API funciona.
Quando temos um App feito em React, ao ser acessado nossa pagina ira carregar e logo apos sera feita a consulta em uma API, pro nosso SEO isso não e algo bom, pois os motores de busca não esperam uma busca por API. para isso usamos Server Side Rendering provido do Next.js.

Vamos Implementar em nossa pagina Home e veja como e simples.
Para falarmos para Next que esta pagina precisa de renderização do lado do servidor, basta adicionarmos um método assíncrono chamado getServerSideProps a este retornara um objeto contendo a propriedade Props que e o Props que nosso componente ira receber em sua construção.
Usarei uma Fake Rest Api, caso queira consultar o site **jsonplaceholder.**

Adicionando Typescript

Adicionar Typescript em projetos Next, não e algo complexo, basta adicionarmos as seguintes dependências:

npm install typescript @types/react @types/node -D

Por fim, altere as extensões das paginas .js e .jsx para .ts e .tsx, inicie o projeto em desenvolvimento, será gerado automaticamente o arquivo tsconfig.json e seu projeto já esta funcionando com todos benefícios do Typescript.

Fim

Obrigado por ter chego ate aqui, espero que este conteúdo tenha te agregado algum conhecimento. Caso queira ver código por completo acesse meu Github

Comments

[Claudio Lins]

Olá,
Estou fazendo um site em Nextjs, porém estou hospedando em um shared host (não na Vercel). A minha dúvida é que estou criando um sendmail com Nodemailer na pasta /Pages/api.

Vai funcionar fora da Vercel?

Obrigado

Cláudio Lins