Next.js 15: as principais novidades da versao

O Next.js 15 foi lancado em outubro de 2024 como uma versao estavel pronta para producao, consolidando mudancas que vinham sendo gestadas desde o ciclo de Release Candidates. A versao trouxe quebras de compatibilidade intencionais, melhorias expressivas de performance e um conjunto de novos recursos que afetam diretamente a forma como aplicacoes React sao construidas no framework. Se voce ainda esta em producao com Next.js 14 ou versoes anteriores, este artigo mapeia o que mudou e o que exige atencao antes de voce fazer o upgrade.

Turbopack estavel no ambiente de desenvolvimento

Uma das entregas mais esperadas da versao 15 foi a estabilizacao do Turbopack para o servidor de desenvolvimento. Com o comando next dev --turbo, o bundler escrito em Rust passa a ser uma opcao de producao confiavel, nao mais experimental.

Os numeros publicados pela Vercel com base no repositorio do vercel.com, uma aplicacao Next.js de grande porte, sao expressivos: ate 76,7% de reducao no tempo de inicializacao do servidor local e ate 96,3% de aceleracao nas atualizacoes com Fast Refresh. (nextjs.org/blog/next-15)

Vale destacar que, no momento do lancamento do Next.js 15, o Turbopack estava estabilizado apenas para o servidor de desenvolvimento. O next build continuava usando Webpack por padrao. A versao 15.3 introduziu o Turbopack para builds em alpha, e versoes subsequentes avancaram nessa direcao. (nextjs.org/blog/next-15-3)

APIs de requisicao se tornam assincronas (breaking change)

Esta e provavelmente a mudanca mais impactante do Next.js 15 para quem ja tem codigo em producao. APIs que dependem de dados da requisicao como headers(), cookies(), params e searchParams passaram a ser asincronas e retornam Promises. (nextjs.org/docs/messages/sync-dynamic-apis)

O objetivo declarado da equipe e permitir que o runtime diferencie com mais precisao rotas estaticas, dinamicas e condicionalmente dinamicas, evitando cache busts acidentais. Ao tornar o acesso explicito via await, o framework consegue adiar a avaliacao dessas APIs e tomar decisoes de cache mais precisas. (nextjs.org/blog/next-15)

Veja como fica o acesso a cookies antes e depois da migracao:

// Antes: Next.js 14
import { cookies } from 'next/headers'

export async function AdminPanel() {
  const cookieStore = cookies() // sincrono
  const token = cookieStore.get('token')
  // ...
}

// Depois: Next.js 15
import { cookies } from 'next/headers'

export async function AdminPanel() {
  const cookieStore = await cookies() // assincrono
  const token = cookieStore.get('token')
  // ...
}

O mesmo padrao se aplica a headers() e ao acesso a params e searchParams em layouts e paginas. A compatibilidade sincrona temporaria esta presente no Next.js 15 com avisos em desenvolvimento, mas foi completamente removida no Next.js 16. (nextjs.org/docs/app/guides/upgrading/version-15)

Para facilitar a migracao, a equipe disponibilizou um codemod automatizado:

npx @next/codemod@canary upgrade latest

Mudancas no comportamento de cache (breaking change)

Outro breaking change relevante: requisicoes fetch, Route Handlers com metodo GET e navegacoes client-side deixaram de ser cacheadas por padrao. (nextjs.org/blog/next-15)

Antes, o App Router aplicava cache agressivo como comportamento padrao. No Next.js 15, a logica se inverte: o padrao e no-store. Para optar pelo cache, o desenvolvedor precisa ser explicito. Isso elimina uma fonte frequente de confusao com dados desatualizados em producao, mas exige revisao de qualquer codigo que dependesse do cache implicito.

Para configurar cache customizado em rotas estaticas, a opcao staleTimes permite ajuste fino:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}

module.exports = nextConfig

Suporte ao React 19 e React Compiler experimental

O Next.js 15 alinha o App Router com o React 19 RC e introduz compatibilidade retroativa com React 18 para o Pages Router. Isso significa que equipes que ainda usam o Pages Router podem fazer upgrade do Next.js sem precisar migrar o React ao mesmo tempo. (nextjs.org/blog/next-15)

O React 19 tambem trouxe melhorias na depuracao de erros de hidratacao: os erros passaram a incluir informacoes mais claras sobre o elemento problematico e sugestoes de correcao diretamente no output do terminal e do browser. (dev.to)

Alem disso, o Next.js 15 inclui suporte experimental ao React Compiler, um compilador criado pela equipe do React na Meta que analisa o codigo e adiciona memoizacao automatica sem necessidade de useMemo ou useCallback manuais. O suporte e opt-in e nao afeta o comportamento existente dos componentes. (nextjs.org/blog/next-15)

Melhorias de segurança nas Server Actions

O Next.js 15 introduziu duas melhorias diretas de segurança para Server Actions:

• Dead code elimination: Server Actions que nao sao referenciadas em nenhum ponto da aplicacao nao tem seus IDs expostos no bundle do cliente. Isso reduz a superficie de ataque e o tamanho do bundle simultaneamente.
• IDs nao deterministas: O Next.js gera IDs opacos e nao previsíveis para cada Server Action. Esses IDs sao recalculados periodicamente entre builds, dificultando ataques baseados em enumeracao de endpoints. (nextjs.org/blog/next-15)

// app/actions.ts
'use server'

// Esta action e usada na aplicacao.
// O Next.js gera um ID seguro e a expoe como endpoint.
export async function updateUserAction(formData: FormData) {}

// Esta action NAO e usada em nenhum lugar.
// O Next.js a remove no build e nao cria endpoint publico.
export async function deleteUserAction(formData: FormData) {}

Apesar dessas protecoes, a documentacao oficial recomenda que Server Actions continuem sendo tratadas como endpoints HTTP publicos, com verificacoes de autorizacao adequadas em cada funcao.

API after: codigo pos-resposta

O Next.js 15 introduziu a API unstable_after como experimental. Ela permite agendar execucao de codigo apos o termino do streaming da resposta ao cliente, sem bloquear o carregamento da pagina. Na versao 15.1, a API foi estabilizada com o nome after. (nextjs.org/blog/next-15-1)

O caso de uso classico e o registro de logs, envio de eventos de analytics ou sincronizacao de dados em background, sem adicionar latencia a resposta percebida pelo usuario.

import { after } from 'next/server'

export async function POST(request: Request) {
  const data = await request.json()

  // Processa a requisicao normalmente
  const result = await saveToDatabase(data)

  // Executa apos a resposta ser enviada ao cliente
  after(async () => {
    await sendAnalyticsEvent('form_submitted', data)
  })

  return Response.json(result)
}

Outros recursos relevantes da versao

• Suporte ao ESLint 9: O Next.js 15 adicionou suporte ao ESLint 9, mantendo compatibilidade retroativa com ESLint 8. A versao tambem atualiza o eslint-plugin-react-hooks para a versao 5.0.0. (nextjs.org/blog/next-15)
• Static Route Indicator: Um indicador visual no ambiente de desenvolvimento mostra quais rotas sao estaticas e quais sao dinamicas, facilitando a identificacao de oportunidades de otimizacao sem precisar rodar o build.
• Suporte a TypeScript no next.config: O arquivo de configuracao agora pode ser escrito como next.config.ts, com tipagem completa disponivel.
• Formularios aprimorados (next/form): O componente Form nativo do Next.js passou a incluir prefetching automatico, progressive enhancement e navegacao client-side integrados, eliminando a necessidade de codigo customizado para esses comportamentos. (nextjs.org/blog/next-15)
• API instrumentation.js estavel: Permite observabilidade do ciclo de vida do servidor, util para integracao com ferramentas de APM e rastreamento de erros.

Como fazer o upgrade

A Vercel disponibilizou um CLI de codemod que automatiza grande parte da migracao, incluindo a atualizacao das APIs assincronas e renomeacao de configuracoes que mudaram de namespace:

# Upgrade automatizado com codemod
npx @next/codemod@canary upgrade latest

# Ou upgrade manual
npm install next@latest react@latest react-dom@latest

Antes de aplicar o upgrade em producao, revise os pontos criticos: uso de cookies(), headers(), params e searchParams sem await; dependencias de cache implicito em Route Handlers GET; e pacotes de terceiros que ainda nao publicaram versao compativel com as novas APIs assincronas.

Conclusao

O Next.js 15 e uma versao de maturidade: mais do que adicionar funcionalidades, ela corrige comportamentos implicitos que geravam confusao e vulnerabilidades em aplicacoes reais. O Turbopack estavel no desenvolvimento, as APIs assincronas, o cache explicito por padrao e as melhorias de segurança nas Server Actions representam um framework mais previsivel e seguro. Se voce ainda nao iniciou o processo de upgrade, comece pelos codemods, valide em ambiente de staging e planeje a migracao das APIs de requisicao com antecedencia, especialmente se o seu projeto usa bibliotecas de terceiros que acessam cookies() ou headers() de forma sincrona.