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.jsonpara 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 pageschamado 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.