Entrevistas de Next.js se concentram em estratégias de rendering, no App Router, server components, e caching — as partes que separam o Next do React puro. Aqui estão as perguntas mais comuns com respostas modelo. Junior: teoria básica, definições e casos práticos simples.
Server Components renderizam no servidor, nunca enviam seu código ao navegador e podem ler um banco de dados diretamente. Client Components rodam no navegador e são o que você precisa para state, effects e event handlers. Tudo é um Server Component até você escrever 'use client', e essa diretiva marca uma fronteira — tudo que é importado abaixo dela também vira código de cliente.
Marca a fronteira entre código de servidor e cliente, não um único arquivo. Colocá-la no topo de um componente significa que esse componente e tudo que ele importa é empacotado para o navegador. Por isso ela pertence o mais fundo possível na árvore — um 'use client' em um layout arrasta toda a subárvore para o bundle.
O Pages Router coloca uma rota em um arquivo e busca dados com getServerSideProps ou getStaticProps. O App Router usa pastas com page.tsx, suporta layouts aninhados que não re-renderizam na navegação, e busca dados com componentes async. Projetos novos usam App Router; Pages existe porque migrações levam tempo.
page.tsx é o conteúdo próprio da rota. layout.tsx a envolve e tudo aninhado abaixo dela, e crucialmente não re-renderiza quando você navega entre seus filhos — por isso navegação e sidebars pertencem ali. O estado em um layout sobrevive à navegação; o estado em uma página não.
Torne o Server Component async e dê await nos dados diretamente nele — sem hook, sem effect, sem estado de carregamento no próprio componente. O Next o renderiza assim que a promise resolve. Um loading.tsx ao lado da página fornece o fallback enquanto isso.
Link navega do lado do cliente, mantém o layout montado e faz prefetch da rota quando ela entra no viewport. Um <a> simples faz um carregamento completo de página, descartando a árvore do React e qualquer estado. Usar um anchor para navegação interna é a forma mais rápida de fazer uma app rápida parecer lenta.
Numa entrevista de verdade você fala sob pressão. O Cam faz essas mesmas perguntas, avalia cada resposta e mostra exatamente o que melhorar.
Praticar entrevista de Junior Next.js →