?
InterviewQuestions .technology

As 10 Perguntas de Entrevista sobre Next.js que Voce Deve Conhecer em 2026

Published: 1/11/2026 · Updated: 1/14/2026

JavaScriptFrontendnextjsreactentrevista
As 10 Perguntas de Entrevista sobre Next.js que Voce Deve Conhecer em 2026 - Key Takeaways
As 10 Perguntas de Entrevista sobre Next.js que Voce Deve Conhecer em 2026 - Key Takeaways

O Next.js se tornou o framework React preferido para aplicacoes de producao. Seja voce se preparando para uma posicao de frontend ou full-stack, estas perguntas cobrem os conceitos que os entrevistadores consistentemente perguntam.

1. O que e Next.js e por que voce o usaria em vez de React puro?

Next.js e um framework React que fornece estrutura e recursos integrados para construir aplicacoes prontas para producao. Enquanto React e uma biblioteca de interface de usuario que requer configuracao manual para roteamento, estrategias de renderizacao e otimizacao, o Next.js lida com essas preocupacoes de forma nativa.

Vantagens principais sobre React puro:

  • Roteamento baseado em arquivos sem bibliotecas adicionais
  • Renderizacao do lado do servidor (SSR) e geracao de sites estaticos (SSG) integrados
  • Divisao automatica de codigo por pagina
  • Rotas de API para funcionalidade de backend
  • Otimizacao integrada de imagens e fontes

Use Next.js quando precisar de SEO, carregamentos de pagina iniciais rapidos ou quiser reduzir a sobrecarga de configuracao.

2. Explique a diferenca entre SSR, SSG e CSR

Estas sao as tres principais estrategias de renderizacao no Next.js:

Renderizacao do Lado do Servidor (SSR): O HTML e gerado no servidor para cada requisicao. A pagina esta sempre atualizada, mas e mais lenta ja que o servidor trabalha em cada visita. Use getServerSideProps para esta abordagem.

Geracao de Sites Estaticos (SSG): O HTML e gerado uma vez no momento da compilacao e reutilizado para cada requisicao. Esta e a opcao mais rapida, mas o conteudo e estatico ate a proxima compilacao. Use getStaticProps para esta abordagem.

Renderizacao do Lado do Cliente (CSR): O navegador recebe um shell HTML minimo e o JavaScript renderiza o conteudo. Isso resulta em carregamentos iniciais mais lentos, mas funciona bem para dashboards autenticados onde SEO nao importa.

// SSR - executa em cada requisicao
export async function getServerSideProps() {
  const data = await fetchLiveData()
  return { props: { data } }
}

// SSG - executa uma vez no momento da compilacao
export async function getStaticProps() {
  const data = await fetchStaticData()
  return { props: { data } }
}

3. O que e Regeneracao Estatica Incremental (ISR)?

ISR combina os beneficios de desempenho da geracao estatica com a atualidade da renderizacao do lado do servidor. As paginas sao pre-construidas no momento do deploy, mas o Next.js as regenera em segundo plano apos um intervalo especificado.

export async function getStaticProps() {
  const products = await fetchProducts()
  return {
    props: { products },
    revalidate: 60 // Regenerar pagina a cada 60 segundos
  }
}

Quando um usuario visita uma pagina apos sua janela de revalidacao, ele recebe a versao em cache imediatamente enquanto o Next.js reconstroi a pagina em segundo plano. O proximo visitante obtem a versao atualizada.

ISR e ideal para paginas de produtos de e-commerce, posts de blog ou qualquer conteudo que muda periodicamente mas nao precisa de precisao em tempo real.

4. Como funciona o roteamento baseado em arquivos no Next.js?

O Next.js cria automaticamente rotas baseadas na estrutura de arquivos no seu diretorio pages (Pages Router) ou app (App Router).

pages/
  index.js          → /
  about.js          → /about
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug (dinamico)
  api/
    users.js        → /api/users

Rotas dinamicas usam colchetes. O nome do arquivo [slug].js corresponde a qualquer valor e o torna disponivel atraves do router:

import { useRouter } from "next/router"

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query
  // slug contem o segmento dinamico
}

Para geracao estatica de rotas dinamicas, voce tambem deve implementar getStaticPaths para informar ao Next.js quais caminhos pre-renderizar.

5. Qual e o proposito do getStaticPaths?

getStaticPaths informa ao Next.js quais rotas dinamicas pre-renderizar no momento da compilacao. Sem ele, o Next.js nao sabe quais valores o segmento dinamico pode ter.

// pages/posts/[id].js
export async function getStaticPaths() {
  const posts = await getAllPosts()
  
  return {
    paths: posts.map(post => ({
      params: { id: post.id.toString() }
    })),
    fallback: "blocking" // ou false, ou true
  }
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.id)
  return { props: { post } }
}

Opcoes de fallback:

  • false - Caminhos desconhecidos retornam 404
  • true - Caminhos desconhecidos mostram um estado de carregamento enquanto geram
  • "blocking" - Caminhos desconhecidos aguardam a geracao antes de responder (recomendado)

6. Como funcionam as rotas de API?

Arquivos dentro de pages/api/ se tornam endpoints de API serverless. Cada arquivo exporta uma funcao handler que recebe objetos de requisicao e resposta similares ao Express.

// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === "GET") {
    const users = await db.users.findMany()
    res.status(200).json(users)
  } else if (req.method === "POST") {
    const user = await db.users.create(req.body)
    res.status(201).json(user)
  } else {
    res.setHeader("Allow", ["GET", "POST"])
    res.status(405).end()
  }
}

As rotas de API executam apenas do lado do servidor e sao implantadas como funcoes serverless em plataformas como Vercel. Sao uteis para manipulacao de formularios, operacoes de banco de dados e integracao com APIs de terceiros sem expor credenciais.

7. Explique o componente Image do Next.js

O componente next/image substitui a tag padrao <img> com otimizacao automatica:

import Image from "next/image"

export default function Avatar() {
  return (
    <Image
      src="/profile.jpg"
      alt="Foto de perfil"
      width={200}
      height={200}
      priority // Carregar imediatamente para imagens above-the-fold
    />
  )
}

Otimizacoes automaticas incluem:

  • Dimensionamento responsivo baseado no dispositivo
  • Conversao para formatos modernos (WebP, AVIF)
  • Carregamento lazy por padrao
  • Suporte a placeholder com desfoque
  • Prevencao de Mudanca Cumulativa de Layout

Sempre especifique width e height para prevenir mudanca de layout, ou use fill para containers responsivos.

8. O que e middleware no Next.js?

Middleware executa antes de uma requisicao ser completada, permitindo modificar respostas, redirecionar usuarios ou adicionar headers. Ele executa no edge, tornando-o rapido para verificacoes de autenticacao e testes A/B.

// middleware.js (raiz do projeto)
import { NextResponse } from "next/server"

export function middleware(request) {
  const token = request.cookies.get("auth-token")
  
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url))
  }
  
  return NextResponse.next()
}

export const config = {
  matcher: ["/dashboard/:path*"]
}

Casos de uso comuns incluem autenticacao, redirecionamentos baseados em geolocalizacao, deteccao de bots e registro de requisicoes.

9. Como voce lida com variaveis de ambiente?

Next.js suporta variaveis de ambiente atraves de arquivos .env com uma distincao importante entre acesso do lado do servidor e do lado do cliente.

# .env.local
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com

Apenas do lado do servidor: Variaveis sem prefixo estao disponiveis apenas em getServerSideProps, getStaticProps e rotas de API. Isso protege dados sensiveis como credenciais de banco de dados.

Acessivel do lado do cliente: Variaveis prefixadas com NEXT_PUBLIC_ sao empacotadas no JavaScript e disponiveis no navegador. Use apenas para configuracao nao sensivel.

// Apenas do lado do servidor
export async function getServerSideProps() {
  // process.env.DATABASE_URL esta disponivel aqui
}

// Acessivel do lado do cliente
const apiUrl = process.env.NEXT_PUBLIC_API_URL

10. Quais sao as diferencas entre Pages Router e App Router?

O Next.js 13 introduziu o App Router como um novo paradigma junto ao tradicional Pages Router.

Pages Router (diretorio pages/):

  • Roteamento baseado em arquivos com getStaticProps, getServerSideProps
  • Usa _app.js para layouts globais
  • Componentes de cliente por padrao
  • Estavel e amplamente documentado

App Router (diretorio app/):

  • Componentes de Servidor React por padrao
  • Layouts aninhados com arquivos layout.js
  • Busca de dados simplificada com componentes assincronos
  • Estados de carregamento e erro integrados
  • Suporte a Streaming e Suspense
// App Router - busca de dados e mais simples
async function BlogPage() {
  const posts = await fetchPosts() // Async direto no componente
  return <PostList posts={posts} />
}

Para novos projetos, o App Router e recomendado. Para projetos existentes, a migracao pode ser feita de forma incremental ja que ambos os routers funcionam simultaneamente.

Bonus: Perguntas de Acompanhamento Comuns

Entrevistadores frequentemente aprofundam com perguntas como:

  • Como voce implementaria autenticacao no Next.js? (NextAuth.js, middleware)
  • Como voce otimiza Core Web Vitals? (Componente Image, otimizacao de fontes, divisao de codigo)
  • Qual e a diferenca entre next/link e uma tag <a> normal? (Navegacao do lado do cliente vs recarregamento completo)
  • Como voce lida com estado global? (Context API, Zustand, Redux com provider no layout)

Pratique explicar esses conceitos em voz alta. Entrevistadores valorizam comunicacao clara tanto quanto precisao tecnica.