Novidades do Next.js 15: Novos Hooks, Turbopack e Mais

Next.js sempre esteve na vanguarda do desenvolvimento web moderno, e com a versão 15, novas funcionalidades foram introduzidas para melhorar tanto a performance quanto a experiência do desenvolvedor. Vamos dar uma olhada mais de perto nas atualizações mais impactantes, com exemplos práticos. 🎉

No final deste artigo, você também encontrará um repositório de exemplo para começar com o Next.js v15.

Suporte Completo ao React 19 com Novos Hooks ⚛️

Com o Next.js 15, agora temos suporte completo para o React 19, incluindo novos hooks como:

useActionState

Este hook ajuda a gerenciar e exibir o estado de ações em andamento na interface.

const submitActionWithCurrentState = async (prevState, formData) => {
  // Realiza uma ação, como adicionar um usuário no array de usuários
};

export default function ActionStateComponent() {
  const [state, formAction] = useActionState(submitActionWithCurrentState, {
    users: [],
    error: null,
  });

  return (
    <div>
      <h1>Exemplo do useActionState</h1>
      <form action={formAction} id="action-hook-form" className="mb-4">
        <div>
          <input type="text" name="username" placeholder="Digite seu nome" />
          <button type="submit">Enviar</button>
        </div>
      </form>
      <div>{state?.error}</div>
      {state?.users?.map((user) => (
        <div key={user.username}>
          Nome: {user.username} Idade: {user.age}
        </div>
      ))}
    </div>
  );
}

useFormStatus

Ideal para rastrear o estado de envio de formulários em tempo real. Exemplo:

const Form = () => {
  const { pending, data } = useFormStatus();

  return (
    <div>
      <input type="text" name="username" placeholder="Digite seu nome" />
      <button disabled={pending} type="submit">
        Enviar
      </button>
      {pending && <p>Enviando {data?.get('username')}...</p>}
    </div>
  );
};

useOptimistic

Perfeito para lidar com atualizações otimistas, permitindo que a interface seja atualizada instantaneamente enquanto a solicitação está sendo processada.

export default function OptimisticComponent() {
  const [title, setTitle] = useState('Título');
  const [optimisticTitle, setOptimisticTitle] = useOptimistic(title);
  const [error, setError] = useState(null);
  const pending = title !== optimisticTitle;

  const handleSubmit = async (formData) => {
    setError(null);
    setOptimisticTitle(formData.get('title'));
    try {
      const updatedTitle = await submitTitle(formData);
      setTitle(updatedTitle);
    } catch (e) {
      setError(e.message);
    }
  };

  return (
    <div>
      <h1>Exemplo do useOptimistic</h1>
      <h2>{optimisticTitle}</h2>
      <p>{pending && 'Atualizando...'}</p>
      <form action={handleSubmit}>
        <input type="text" name="title" placeholder="Mudar Título" />
        <button type="submit" disabled={pending}>
          Enviar
        </button>
      </form>
      <div>{error && error}</div>
    </div>
  );
}

Estratégias de Cache Atualizadas

O sistema de cache foi refinado no Next.js 15 para um comportamento mais previsível:

• Sem cache automático: Requisições fetch e manipuladores de rotas não são mais armazenados em cache por padrão. Precisaremos definir explicitamente parâmetros de cache.

async function getData() {
  const res = await fetch('https://api.dimeloper.com/', {
    cache: 'force-cache',
  });
  return res.json();
}

• Ajustes no cache do roteador do cliente: Componentes de página não são mais armazenados em cache por padrão, evitando problemas ao esperar atualizações em tempo real.

Novo Componente <Form> 📋

O Next.js 15 introduziu o novo componente <Form> para otimizar a funcionalidade de formulários, oferecendo prefetching, navegação do lado do cliente e melhorias progressivas.

export default function FormPage() {
  return (
    <div>
      <h1>Componente Form do Next.js 15</h1>
      <Form action="/search">
        <input name="query" placeholder="Digite sua busca" />
        <button type="submit">Enviar</button>
      </Form>
    </div>
  );
}

Benefícios do <Form>:

• Prefetching: O layout é pré-carregado, acelerando a navegação.
• Navegação do Lado do Cliente: Ao submeter o formulário, o estado compartilhado do cliente é preservado.
• Melhoria Progressiva: O formulário funciona mesmo sem JavaScript carregado, garantindo navegação completa.

TurboPack: Desenvolvimento Turbinado ⚡

O Next.js 15 habilita o TurboPack durante o desenvolvimento, garantindo inícios de servidor local e atualizações de código super rápidas.

"scripts": {
  "dev": "next dev --turbo"
}

Suporte ao ESLint 9 e TypeScript no next.config.ts

Next.js 15 agora suporta ESLint 9 e também arquivos next.config.ts, permitindo verificações de tipo do TypeScript.

Repositório Inicial para v15 com Exemplos

Confira o repositório inicial no GitHub que demonstra todos os recursos do Next.js 15, incluindo os novos hooks e componentes.

Repositório Inicial do Next.js 15 Demo Online

# Para começar:
yarn install
yarn dev

Conclusão 🏁

O Next.js 15 traz várias funcionalidades que melhoram a experiência do desenvolvedor e a performance das aplicações. Experimente essas novidades e veja as melhorias você mesmo! 🚀