Next.js, React e o package.json

Ao construir um projeto web, eu gosto de pensar numa analogia com uma construção. Primeiro você precisa de uma fundação (como o Node.js), que é a dependência base do projeto e será usado para rodar o sistema, tanto em ambiente de desenvolvimento quanto em produção, num servidor remoto, que é onde os usuários vão conseguir acessar.

E, naturalmente, com a base feita, podemos começar a levantar as paredes, o que de fato vai dar para começar a tocar no sistema. E o primeiro módulo que podemos utilizar para fazer isso é o Next.js.

Next.js, React e React DOM

Eu gosto da analogia das paredes quando se trata do Next.js, porque assim como uma parede, ele não vai te dar nada do que vai dentro de uma sala, por exemplo. Não vai opinar sobre os objetos concretos como mesa, cadeira, não vai opinar em nada. Quem vai ser responsável por construir isso é o React.

flowchart BT
  A["🏗️ Node.js — Fundação"] --> B["🧱 Next.js — Paredes"]
  B --> C["🪑 React — Objetos"]

  style A fill:#0000ff10,stroke:#58a6ff
  style B fill:#ff880010,stroke:#f0883e
  style C fill:#00ff0010,stroke:#3fb950

Então, o Next meio que vai controlar ou orquestrar tudo que está acontecendo, os limites de cada coisa, tanto no backend, no lado do servidor, quanto no frontend, no lado que encosta de fato no usuário. E o preenchimento, a sustância, é responsabilidade de outros módulos mais específicos.

De qualquer forma, se você usar o Next, você vai contar com uma das melhores integrações framework/webhost que eu já vi na minha vida, tá? De verdade, colocar um site no ar que traga consigo tanto o backend quanto o frontend nunca foi tão fácil. Isso porque o Next.js é desenvolvido pela Vercel, que é uma empresa que fornece hospedagem de sites, incluindo de formas gratuitas, e que está levantando a barra do mercado, principalmente na experiência do desenvolvedor. Não serve para todas as situações, tá? Não mesmo. Mas para muitas, esse combo Next.js mais Vercel é fantástico e dá para criar muita coisa, incluindo o TabNews de fora a fora.

Depois de um processo de evolução do React, ele foi separado em subcomponentes, onde eles separaram o que é a biblioteca React, o core, de onde de fato o resultado dele vai aparecer, onde ele vai ser renderizado. Isso porque, com o código React, você pode renderizar uma interface web, ou renderizar uma interface para terminal. Pode fazer aplicativos para TV, pode usar o famoso React Native para renderizar contra iOS ou Android. Pode até renderizar coisas em 3D. É muito louco e tem muitos outros renderizadores.

Então eles sabiamente decidiram separar esses renderizadores em outros submódulos. E o que é usado para renderizar HTML, as tags, os nós do DOM, se chama React DOM.

O package.json

Ao invés de só baixar da internet um código e colocar na pasta do projeto, antes de instalar o React e o Next.js precisamos criar um arquivo de manifesto que vai, dentre outras coisas, listar as dependências do projeto. Esse arquivo se chama package.json. E lá vai estar listado que uma das dependências é o Next na versão X, ou o React na versão Y, e assim por diante.

Isso é perfeito para quando uma outra pessoa pegar o seu projeto conseguir instalar as exatas mesmas versões das dependências, ou até quando um servidor remoto fizer o build final do seu sistema, também fazer ele com as exatas mesmas versões que você usou na hora de desenvolver.

Para criar esse arquivo, basta utilizar o npm, que é um dos gerenciadores de pacotes do Node.js, com o comando init:

$ npm init

Ao executar, ele vai começar a fazer algumas perguntas. Para quase todas, basta dar enter para usar a resposta padrão. Por fim, ele avisa que vai criar o arquivo package.json com o conteúdo resultante.

Instalando as dependências

Com isso, podemos instalar o Next.js de uma forma que ele seja listado dentro do package.json como uma dependência do projeto:

$ npm install next

E pimba, instalou. E, inclusive, foi adicionado no package.json a chave de dependências e nela já está listado o Next na versão desejada.

Agora, lembra da analogia: o Next lida com as paredes e quem cria a sustância é o React. Então vamos instalar ele também. E é a mesma coisa:

$ npm install react

E, como o React foi separado em subcomponentes, precisamos instalar também o renderizador para HTML, o React DOM:

$ npm install react-dom

E pronto. O package.json agora lista as três dependências do projeto:

{
  "dependencies": {
    "next": "^16.2.3",
    "react": "^19.2.5",
    "react-dom": "^19.2.5"
  }
}

E só com essas três dependências dá para fazer muita coisa legal.

Então, matricule-se no curso.dev para construir um projeto real utilizando essas tecnologias e entender na prática como cada uma dessas peças se encaixa ao longo do desenvolvimento.