O que é Next.js?

Next.js é um framework para criar aplicações web com React. Ele reúne em um só projeto o que normalmente exigiria várias ferramentas: rotas, renderização no servidor, otimização de imagens e rotas de API. É mantido pela Vercel.

Como funciona

No Next.js, as páginas são organizadas em pastas. Cada pasta vira uma rota do site. Uma pasta chamada sobre vira o endereço /sobre.

O framework permite escolher como cada página é gerada. Ela pode ser montada no servidor a cada visita, gerada antes e servida pronta, ou montada no navegador. Isso ajuda no desempenho e na indexação em buscadores.

Também dá para criar endpoints de API no mesmo projeto, que rodam no servidor e guardam chaves secretas longe do navegador.

Os detalhes de estrutura mudam entre versões, então consulte a documentação oficial da versão que você usa.

Exemplo prático

Você quer um site com um chat que responde dúvidas sobre sua loja. A página com o chat é a interface. Uma rota de API no servidor recebe a pergunta, chama o modelo de IA com sua chave e devolve a resposta.

$ npx create-next-app@latest minha-loja
$ cd minha-loja
$ npm run dev

Com isso, o projeto sobe localmente e você já pode criar páginas e rotas. A chave do modelo fica em variável de ambiente, nunca no código que vai para o navegador.

Para que serve

Next.js serve para sites institucionais, blogs, lojas virtuais, painéis e produtos SaaS. É uma escolha comum quando se quer bom desempenho e boa indexação no Google.

Para quem usa assistentes de código, o Next.js é um dos frameworks que os modelos mais conhecem, o que costuma render bons resultados ao gerar código.

Diferença entre Next.js e React

React é uma biblioteca para construir interfaces. Next.js é um framework que usa o React e adiciona rotas, renderização no servidor e outras peças. Dá para usar React sem Next.js, mas o contrário não.