Next.js 15: Novas Funcionalidades e Ajustes para um Desenvolvimento Mais Poderoso

Com o Next.js 15, a Vercel trouxe várias melhorias e recursos que prometem elevar a experiência de desenvolvimento, especialmente no controle de cache, APIs assíncronas e performance. Abaixo, vamos explorar as principais mudanças e como você pode implementá-las.

1. Ferramenta de Migração com Codemod CLI

Com o Next.js 15, migrar seu projeto ficou mais simples graças ao Codemod CLI. Basta rodar o seguinte comando para aplicar as principais mudanças estruturais:

1npx @next/codemod@canary upgrade latest

Esse comando ajusta automaticamente as principais quebras e configurações para que seu projeto esteja pronto para aproveitar as novidades do Next.js 15.

2. APIs Assíncronas para Headers, Cookies e Search Params

No Next.js 15, os dados como headers e cookies agora são acessados via funções assíncronas, o que exige o uso de await. Esse ajuste, segundo a Vercel, permite que o servidor inicie o processo de renderização mais cedo, antes de processar todos os dados de requisição.

Anteriormente, esses dados eram acessados diretamente, mas agora você precisa definir await em cada interação. Para desenvolvedores TypeScript, isso também significa mais tipagens, mas uma experiência mais robusta e alinhada ao modelo assíncrono.

Exemplo de Código em TypeScript com headers e cookies

Abaixo está um exemplo de um endpoint GET para obter headers e cookies:

1import { headers, cookies } from 'next/headers';
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest): Promise<NextResponse> {
5  const userHeaders = await headers();
6  const sessionCookies = await cookies();
7
8  return NextResponse.json({
9    message: 'Dados recebidos com sucesso',
10    headers: userHeaders,
11    cookies: sessionCookies,
12  });
13}

Neste exemplo, tanto headers quanto cookies agora exigem await. Caso você esqueça de adicionar await, pode enfrentar erros inesperados, especialmente em componentes que utilizam esses dados para renderizar conteúdo.

3. Controle Manual de Cache para Endpoints de API

Antes do Next.js 15, a maioria das rotas e APIs eram automaticamente cacheadas. Isso resultava em situações onde endpoints que deveriam ser dinâmicos acabavam repetindo dados, forçando desenvolvedores a desabilitar manualmente o cache. No Next.js 15, o cache agora é manual, e você tem a opção de especificá-lo com Cache-Control, apenas onde realmente é necessário.

Configuração de Cache com Cache-Control

Aqui está um exemplo de endpoint onde o cache é configurado manualmente:

1export async function GET(request: NextRequest): Promise<NextResponse> {
2  const randomNumber = Math.random();
3  return new NextResponse(JSON.stringify({ number: randomNumber }), {
4    status: 200,
5    headers: { 'Cache-Control': 'no-store' }, // Sem cache
6  });
7}

Se precisar armazenar o cache por um tempo definido, como uma hora, adicione public, max-age=3600:

1export async function GET(request: NextRequest): Promise<NextResponse> {
2  return new NextResponse(JSON.stringify({ data: "cacheado" }), {
3    status: 200,
4    headers: { 'Cache-Control': 'public, max-age=3600' }, // Cache por 1 hora
5  });
6}

Essa abordagem permite que você controle o armazenamento de dados e garanta que endpoints dinâmicos permaneçam consistentes e atualizados.

4. Suporte Completo ao React 19 e Novos Recursos Experimentais

O Next.js 15 oferece suporte nativo ao React 19, mas, caso você ainda use a Pages Router, o React 18 continua funcional. Isso permite que você aproveite gradualmente as novas funcionalidades do React 19 no App Router, incluindo novos hooks e otimizações para melhorar a performance.

5. React Compiler: Menos Hooks useCallback e useMemo

O React Compiler, agora no Next.js 15, traz uma abordagem inteligente de otimização que promete reduzir a dependência de useCallback e useMemo. O compilador é capaz de analisar as dependências de um componente e otimizar funções automaticamente, deixando seu código mais limpo e fácil de manter.

Antes, com useCallback:

1import React, { useState, useCallback } from 'react';
2
3export default function App() {
4  const [count, setCount] = useState(0);
5
6  const increment = useCallback(() => {
7    setCount((prev) => prev + 1);
8  }, []);
9
10  return (
11    <div>
12      <p>Contador: {count}</p>
13      <button onClick={increment}>Incrementar</button>
14    </div>
15  );
16}

Agora, sem useCallback (com React Compiler):

1import React, { useState } from 'react';
2
3export default function App() {
4  const [count, setCount] = useState(0);
5
6  const increment = () => {
7    setCount((prev) => prev + 1);
8  };
9
10  return (
11    <div>
12      <p>Contador: {count}</p>
13      <button onClick={increment}>Incrementar</button>
14    </div>
15  );
16}

Graças ao React Compiler, o uso do useCallback pode ser reduzido significativamente, tornando o código mais direto e menos propenso a bugs.

6. Mensagens de Erro de Hidratação Mais Esclarecedoras

Mensagens de erro no Next.js 15 agora trazem mais detalhes, especialmente para problemas de hidratação. Antes, um erro de hidratação mostrava mensagens genéricas, mas agora você recebe uma análise detalhada dos possíveis causadores, como incompatibilidades no DOM entre o servidor e o cliente.

Essa atualização ajuda a identificar rapidamente o problema e facilita o debug.

7. TurboPack: Velocidade e Desempenho Melhorados

O TurboPack é um dos grandes destaques do Next.js 15. Ele acelera o desenvolvimento ao melhorar o desempenho do dev server, com um aumento de até 96% na velocidade de atualizações de código. Para quem trabalha em grandes aplicações, isso significa um ambiente de desenvolvimento mais ágil e responsivo, quase eliminando o tempo de espera para que o Fast Refresh seja ativado.

Para habilitar o TurboPack, adicione a configuração abaixo no seu next.config.js:

1// next.config.js
2module.exports = {
3  experimental: {
4    turbo: true, // Ativa TurboPack no Next.js 15
5  },
6};

Considerações Finais: Vale a Pena Atualizar?

O Next.js 15 representa uma atualização que equilibra controle e performance. As APIs assíncronas, o controle manual de cache, o suporte ao React 19 e o TurboPack trazem uma experiência mais poderosa para o desenvolvedor. Se você está disposto a adaptar algumas partes do código para obter desempenho e clareza, esta versão é altamente recomendada.

Aproveite as novidades e explore o que o Next.js 15 tem a oferecer.