Primeira página no Next.js com roteamento baseado em arquivos

Num projeto Next.js, para o servidor web conseguir entregar alguma coisa quando o navegador bater nele, é preciso criar uma página de fato. E é aqui que dá pra ver onde termina a responsabilidade do Next.js e onde começa a do React.

Roteamento baseado em arquivos

Para criar uma página usando o Next.js, você cria de fato arquivos de página dentro do seu projeto. Isso porque o Next usa um sistema chamado file-based routing, ou roteamento baseado em arquivos.

Isso foi inspirado em como o PHP popularizou a criação de páginas lá no passado, onde você criava, por exemplo, um arquivo chamado produtos.php, e o Apache, que é um servidor HTTP, ao receber uma request no endereço /produtos, buscava numa certa pasta pelo arquivo produtos.php para devolver isso como página.

O Next.js atualmente tem duas formas, ou dois diretórios, onde você pode colocar suas páginas. Um mais novo, chamado de App Router (diretório app/), disponibilizado a partir da versão 13 do framework, e um mais antigo, chamado de Pages Router (diretório pages/), que foi a forma usada na construção do TabNews.

Então, na raiz do projeto, podemos criar uma pasta chamada pages, e qualquer arquivo JavaScript ou TypeScript colocado ali dentro vira automaticamente uma página.

A convenção do index

Por exemplo, na raiz dessa pasta podemos colocar um arquivo index.js. O nome index é uma convenção importante porque a tradução da palavra é índice. Um índice de um livro mesmo, que lista o título do capítulo e o número da página. E era como as páginas funcionavam no passado: você entrava primeiro num índice de links, o index, e ele levava para outras páginas.

Na verdade, essa é a mecânica até hoje da maioria dos sites de conteúdo. Ao longo do tempo isso se tornou um padrão tão forte que dá pra chutar que qualquer servidor web hoje vai interpretar automaticamente arquivos index dessa forma especial.

No Next, qualquer pasta que tiver dentro dela um arquivo index.js ou index.ts automaticamente vira uma rota pública, incluindo a raiz da pasta pages, que vira a home do site. E se você colocar outros nomes em vez de index, o nome do arquivo vira o nome da rota:

pages/
├── index.js              →  /
├── sobre.js              →  /sobre
└── produtos/
    ├── index.js          →  /produtos
    └── novo.js           →  /produtos/novo

A cola entre Next.js e React

E é agora que dá pra colocar o pé na linha entre a responsabilidade do Next e do React. O Next.js está entregando a conexão entre o mundo lá fora, as rotas, e o que vão ser os objetos concretos que serão entregues. E esses objetos são componentes React.

Então, dentro do arquivo index.js, escrevemos um componente React, que não passa de uma função JavaScript normal. Por convenção, o nome do componente começa com letra maiúscula:

function Home() {
  return <h1>teste</h1>;
}

Dentro da função, a gente precisa retornar alguma coisa, principalmente para aparecer algo na página. No exemplo acima, retornamos uma tag <h1> com o texto "teste".

Agora vem um detalhe importante sobre a cola entre o Next.js e o React: dentro de um arquivo JavaScript, é possível ter várias funções declaradas fazendo várias coisas diferentes. Então, qual sinal a gente dá pro Next para dizer que é aquela função que deve ser usada para renderizar a página?

A resposta é o export default. A gente exporta a função pra fora do arquivo usando a palavra-chave default, definindo ela como o export padrão, como se fosse o índice de componentes do arquivo, de onde um componente vai chamar outro, formando o layout, os links, os botões e tudo que tiver dentro da página:

export default function Home() {
  return <h1>teste</h1>;
}

Servindo a página no navegador

Com isso o projeto tem algo concreto pro servidor web servir pelo protocolo HTTP. Basta salvar o arquivo e subir o servidor de desenvolvimento, que por padrão fica exposto em localhost na porta 3000. Depois disso, acessando o endereço http://localhost:3000 no navegador, a gente consegue ver a página renderizada.

E tem uma última coisa que é massa: toda vez que você altera algo no código e salva, o Next detecta a mudança e compila uma nova versão da página, atualizando o navegador automaticamente, sem precisar recarregar. Isso se chama hot reload (ou fast refresh).

E a partir daqui, é só ir adicionando mais páginas, mais rotas e componentes, e o projeto vai crescendo. Então, matricule-se no curso.dev para construir um projeto web de verdade e entender na prática como o Next.js e o React se encaixam para formar as páginas que o usuário vai acessar.