Novas Funcionalidades do Next.js 15 - Turbopack Agora Estável

Next.js 15 Lançado

O Next.js 15 foi lançado em outubro de 2024. Inclui muitas novas funcionalidades e melhorias, como suporte ao React 19, estabilização do Turbopack e pré-renderização parcial.

Dica de upgrade: A migração automática está disponível com npx @next/codemod@canary upgrade latest. Você pode automatizar a verificação e correção de mudanças quebradas.

Principais Novas Funcionalidades

1. Turbopack Agora Estável

O Turbopack, novo bundler escrito em Rust, agora está disponível como versão estável para next dev.

# Iniciar servidor de desenvolvimento com Turbopack
next dev --turbo

2. Suporte ao React 19

O React 19 agora é oficialmente suportado, e as novas APIs do React estão disponíveis.

// useActionState com Server Actions
import { useActionState } from 'react';

function Form() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await submitForm(formData);
      return result;
    },
    null
  );

  return (
    <form action={formAction}>
      <input name="email" type="email" />
      <button disabled={isPending}>
        {isPending ? 'Enviando...' : 'Enviar'}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

3. Pré-renderização Parcial (PPR)

Uma nova estratégia de renderização que pré-renderiza o shell estático e preenche as partes dinâmicas via streaming.

// next.config.js
module.exports = {
  experimental: {
    ppr: 'incremental'
  }
}

// page.tsx - Habilitar por rota
export const experimental_ppr = true;

export default async function Page() {
  return (
    <>
      {/* Pré-renderizado estaticamente */}
      <Header />

      {/* Streaming dinâmico */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Benefícios do PPR: Combina a velocidade de sites estáticos com a flexibilidade de conteúdo dinâmico. O TTFB (Time To First Byte) é significativamente melhorado.

4. Introdução do next/after

Uma nova API que permite definir processamento a ser executado após o envio da resposta.

import { after } from 'next/server';

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

  // Retorna a resposta primeiro
  const response = Response.json({ success: true });

  // Executar após a resposta (registro de logs, etc.)
  after(async () => {
    await logAnalytics(data);
    await updateMetrics();
  });

  return response;
}

Mudanças Quebradas

1. Cache de fetch/GET/HEAD Desativado por Padrão

// v14: Cache por padrão
// v15: Sem cache por padrão

// Habilitar cache explicitamente
fetch(url, { cache: 'force-cache' });

2. Fim do Suporte ao React 18

O Next.js 15 requer React 19. Se você está usando React 18, é necessário fazer upgrade para o React 19.

3. APIs de Requisição Assíncronas

cookies(), headers(), params e searchParams agora são assíncronos.

// v14
export default function Page({ params }) {
  const { id } = params;
  return <div>ID: {id}</div>;
}

// v15
export default async function Page({ params }) {
  const { id } = await params;  // await necessário
  return <div>ID: {id}</div>;
}

Procedimento de Upgrade

1. Executar ferramenta de migração automática

npx @next/codemod@canary upgrade latest

2. Atualizar dependências

npm install next@15 react@19 react-dom@19

3. Adaptar para APIs assíncronas

# Conversão automática com codemods
npx @next/codemod@canary next-async-request-api .

Resumo

O Next.js 15 evoluiu significativamente tanto em desempenho quanto em DX. Pontos principais:

• Turbopack estável: Builds de desenvolvimento significativamente mais rápidos
• Suporte ao React 19: Novas APIs do React disponíveis
• PPR: O melhor dos mundos estático e dinâmico
• Revisão do cache: Comportamento padrão mais semântico

Embora haja muitas mudanças quebradas, usando a ferramenta de migração automática, você pode fazer o upgrade de forma relativamente tranquila.