Porque você precisa conhecer o NEXT.js
Começar projetos front-end pode ser um parto.
Projetos React não são exceções.
Você precisa configurar webpack, pensar na estrutura de pastas, nomenclatura dos componentes, etc, etc. E isso tudo fica mais difícil ainda quando você está começando no React, já que o ecossistema dele é imenso, ao mesmo tempo que o mesmo não possui nenhum tipo de padrão de desenvolvimento, deixando brechas para más decisões.
Felizmente, há ferramentas que nos ajudam nessa fase: uma delas é o NEXT.js.
NEXT.js é mantido pela zeit e pela comunidade open-source, e visa agilizar o processo de construção de um app React oferecendo componentes para rota, suporte a SSR (server side rendering) além de webpack já configurado para React e transpilação de ES6 e ES7 que incluem recursos como async
e await
. Mesmo com tudo isso, ele mantém o início simples e flexível o bastante pra escalar o projeto para o tamanho que for necessário.
Esse artigo pretende mostrar um pouco do que se pode fazer com esse framework.
Criando o projeto do zero
Vamos começar criando a pasta do nosso projeto. Em seguida, vamos inicializa-lo para criar o arquivo package.json
para então adicionarmos react
e next
como dependências:
> mkdir my-next-app && cd my-next-app # cria e acessa a pasta do projeto> yarn init # cria um arquivo package.json> yarn add react react-dom next # adiciona dependecias
Aqui utilizamos o Yarn, um gerenciador de pacotes para NodeJS. Saiba mais sobre.
Crie uma pasta chamada pages
na raíz do projeto. Esta pasta é a única condição para que o Next funcione, as rotas são definidas baseadas no conteúdo dela. Crie também um arquivo index.js
onde será definido o componente da página inicial.
> mkdir pages # cria pasta> touch pages/index.js # cria um arquivo index.js dentro da pasta
Dentro do index.js
vamos adicionar um componente:
O Next disponibiliza um servidor de desenvolvimento pré-configurado integrado com hot reload e Webpack. Basta adicionar estas linhas no seu package.json
:
"scripts": {
"dev": "next"
}
Seu package.json
deve ficar mais ou menos assim:
E, agora, rodamos o comando yarn dev
para iniciar o servidor de desenvolvimento.
Agora você já tem um app React sem precisar configurar praticamente nada, um único componente e voilà!
Vamos criar um novo arquivo na pasta pages
chamado about.js
:
> touch pages/about.js # cria arquivo
E criar um outro componente nesse arquivo:
Acesse http://localhost:3000/about.
Perceba que o Next gerou uma rota baseada no arquivo que acabamos de criar sem a necessidade de declarar mais nada.
Agora vamos criar um menu para acessarmos as páginas. Para isso, é preciso criar um componente dentro de uma nova pasta:
> mkdir comps # cria diretório> touch comps/Menu.js # cria arquivo dentro da pasta
Esta deve ser a estrutura do seu projeto nesse momento:
my-next-app
|-- comps
| `-- Menu.js
|-- node_modules
|-- pages
| |-- about.js
| `-- index.js
|-- package.json
`-- yarn.lock
Dentro do nosso Menu, vamos criar um componente com os links. Para isso, usamos o componente Link
do Next:
Perceba que dentro do componente Link
fica um <a></a>
que herdará o href
.
Para implementar o menu nas nossas páginas, vamos adicionar outro componente chamado Layout
onde ficará o Menu que irá repetir em todas as páginas:
> touch comps/Layout.js
E deverá ficar dessa forma:
Incluímos o Layout nas nossas páginas:
E rodamos novamente o servidor de dev:
> yarn dev # executa o script dev criado dentro do package.json
Agora temos nosso menu funcionando:
Achou o nome da pasta de componentes estranha? Sem problemas, vamos mudar para components
:
> mv comps components
Precisamos também mudar os caminho dos import do Layout
nas páginas para ../components/Layout
. Os import de cada página deve ficar assim:
import Layout from '../components/Layout';
Reinicie o servidor dev, acesse nosso app e você perceberá que tudo funciona como antes. Isso porque o Next não se importa com o nome das pastas ou dos componentes que você cria. Ele precisa somente da pasta pages
para criar as rotas de acordo com o nome dos arquivos dentro dela.
Finalizando
NEXT.js oferece muito mais do que falamos aqui. São diversas possibilidades que aceleram o processo de desenvolvimento de um app React e de quebra o framework adiciona várias funcionalidades como SSR, bundle splitting, entre outras coisas que vamos deixar para um próximo artigo.