Next.js 15 foi lançado oficialmente, trazendo uma série de novos recursos empolgantes e mudanças importantes projetadas para melhorar a experiência do desenvolvedor e o desempenho das aplicações. Neste artigo, vamos explorar as principais atualizações, mudanças importantes e melhorias incluídas nesta versão mais recente.

Mudanças Significativas no Next.js 15 ⚠️

Embora a atualização pareça pequena, duas mudanças importantes podem afetar suas aplicações:

APIs de Requisição Assíncronas 🚀

A primeira grande mudança é que as APIs do Next.js, como a função cookies, agora são assíncronas. Por enquanto, os desenvolvedores ainda podem usá-las de forma síncrona, mas é importante começar a usar a sintaxe async/await para um desempenho mais fluido no futuro. Assim, APIs que dependem de dados específicos da requisição — como headers, cookies, params e searchParams — são assíncronas.

import { headers } from 'next/headers'
 
export default async function Home() {
  const authorization = (await headers()).get('authorization')
  const res = await fetch('https://...', {
    headers: { authorization }, // Encaminha o cabeçalho de autorização
  })
  const user = await res.json()
 
  return <h1>{user.name}</h1>
}

Mecanismos de Cache Melhorados 🦾

O cache agressivo do Next.js 14 causou problemas para muitos desenvolvedores. Na versão 15, o cache foi aprimorado. As requisições fetch não são mais armazenadas em cache por padrão, dando aos desenvolvedores maior controle sobre o que é armazenado. Isso facilita o gerenciamento do cache e reduz problemas com dados desatualizados.

Além disso, o cache em rotas de API agora está desativado por padrão, o que muitos desenvolvedores vão apreciar. O novo sistema permite que os desenvolvedores escolham quando usar o cache, dando mais controle sobre suas estratégias de cache.

Cache do Router do Cliente 🔀

Outra grande melhoria está no cache do roteador do cliente. Antes, páginas dinâmicas eram armazenadas em cache por 30 segundos, o que às vezes mostrava dados desatualizados. No Next.js 15, o tempo de cache padrão agora é zero, garantindo que páginas dinâmicas estejam sempre atualizadas. Os desenvolvedores ainda podem ajustar o cache conforme necessário, mas essa mudança melhora significativamente a experiência do usuário.

Novos Recursos Empolgantes 🎉

Processo de Atualização Fácil com Code Mod

Um recurso importante do Next.js 15 é um "code mod" que facilita a atualização do Next.js 14. Esta ferramenta atualiza automaticamente a versão do Next.js, React, hooks do React, versões do ESLint e mais, ajudando seu projeto a atender aos novos padrões com pouco esforço. Isso torna a transição mais suave para os desenvolvedores.

# Use o novo CLI de atualização automatizada
npx @next/codemod@canary upgrade latest
 
# ...ou atualize manualmente
npm install next@latest react@rc react-dom@rc

Suporte ao React 19 🤝

O Next.js 15 é compatível com o React 19, o que significa que os desenvolvedores podem usar os recursos mais recentes do React. Isso traz melhor desempenho e novas ferramentas que aprimoram a experiência de desenvolvimento.

Depuração Aprimorada de Erros de Hidratação ⛔

O Next.js 15 facilita a depuração, fornecendo informações mais claras sobre erros de hidratação. Quando há diferenças entre o conteúdo renderizado no servidor e no cliente, os desenvolvedores podem ver o código-fonte específico que está causando o problema, ajudando-os a corrigir os problemas mais rapidamente.

Integração com Turbo Pack ⚙️

O Next.js 15 introduz o Turbo Pack, um novo compilador rápido. Ele vem desativado por padrão, mas os desenvolvedores podem ativá-lo facilmente. O Turbo Pack visa acelerar bastante o processo de desenvolvimento, tornando-se uma ótima opção para melhorar o fluxo de trabalho.

"scripts": {
    "dev": "next dev --turbo", 
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Indicadores de Rotas Estáticas 🚦

O Next.js 15 agora mostra indicadores de rotas estáticas nas páginas para ajudar os desenvolvedores. Esse recurso permite ver rapidamente quais páginas são renderizadas de forma estática, facilitando a depuração e otimização das aplicações.

unstable_after (Recursos Experimentais) 🧪

O Next.js 15 introduz alguns recursos experimentais, como a funcionalidade unstable_after. Isso permite que os desenvolvedores executem tarefas em segundo plano após enviar uma resposta para o cliente, o que pode melhorar o desempenho ao lidar com tarefas como registro de logs ou envio de e-mails em segundo plano.

A função aceita um callback que é executado após a resposta (ou pré-renderização) ser concluída.

import { unstable_after as after } from 'next/server'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    console.log("Executa após o layout ser renderizado e enviado ao cliente")
  })
  return <>{children}</>
}

Componente de Formulário Aprimorado 📈

O novo componente de formulário no Next.js 15 facilita a navegação entre páginas usando formulários. Ele foi projetado para situações onde o envio de um formulário leva a uma nova página, tornando a navegação mais suave e rápida.

Suporte ao TypeScript no Config 🇹

Para os usuários de TypeScript, o Next.js 15 agora inclui suporte nativo ao TypeScript para o arquivo de configuração, simplificando o processo de desenvolvimento para aqueles que utilizam TypeScript.

Conclusão 🏁

O Next.js 15 é um grande avanço para o framework, abordando muitos problemas das versões anteriores e adicionando novos recursos que aumentam o desempenho e melhoram a experiência do desenvolvedor. Com um processo de atualização mais fácil, cache melhorado e novas capacidades, ele torna o desenvolvimento mais eficiente e fluido.