Next.js 15: Guia Completo das Novas Features e Melhorias

O Next.js 15 chegou com mudanças significativas que prometem revolucionar a forma como desenvolvemos aplicações React. Neste guia completo, vamos explorar todas as novidades, desde o React Compiler até as melhorias no Turbopack.

🚀 O que há de Novo no Next.js 15

1. React Compiler (Experimental)

O React Compiler é uma das adições mais empolgantes. Ele otimiza automaticamente seu código React, eliminando a necessidade de useMemo, useCallback e memo em muitos casos.

// Antes (React 18)
function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  const handleClick = useCallback((id) => {
    // lógica do click
  }, []);

  return (
    <div>
      {filteredItems.map((item) => (
        <Item key={item.id} item={item} onClick={handleClick} />
      ))}
    </div>
  );
}

// Depois (Next.js 15 com React Compiler)
function ExpensiveComponent({ items, filter }) {
  const filteredItems = items.filter((item) => item.category === filter);

  const handleClick = (id) => {
    // lógica do click
  };

  return (
    <div>
      {filteredItems.map((item) => (
        <Item key={item.id} item={item} onClick={handleClick} />
      ))}
    </div>
  );
}

Como ativar:

// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

2. Async Request APIs

Uma das mudanças mais importantes é a transição para APIs de request assíncronas. Isso melhora significativamente a performance e a experiência do desenvolvedor.

// app/blog/[slug]/page.js
async function getBlogPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}

export default async function BlogPost({ params }) {
  // params agora é uma Promise
  const { slug } = await params;
  const post = await getBlogPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Gerando metadata
export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getBlogPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
  };
}

3. Novo Sistema de Caching

O Next.js 15 introduz mudanças significativas no sistema de cache, tornando-o mais previsível e controlável.

// fetch com controle de cache mais granular
async function getData() {
  // Cache por 1 hora
  const res = await fetch("https://api.example.com/data", {
    next: {
      revalidate: 3600,
      tags: ["products"],
    },
  });

  return res.json();
}

// Revalidação por tags
import { revalidateTag } from "next/cache";

export async function POST() {
  // Atualizar cache quando necessário
  revalidateTag("products");
  return Response.json({ success: true });
}

⚡ Turbopack: Mais Rápido que Nunca

Melhorias de Performance

O Turbopack no Next.js 15 traz melhorias substanciais:

• 90% mais rápido para cold starts
• Hot reload quase instantâneo
• Suporte completo ao ecossistema Next.js

# Ativando Turbopack
npx create-next-app@latest my-app --turbo

# Ou em projeto existente
npm run dev --turbo

Configuração Otimizada

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      // Configurações específicas do Turbopack
      resolveAlias: {
        "@/utils": "./src/utils",
        "@/components": "./src/components",
      },
    },
  },
};

module.exports = nextConfig;

🎨 Melhorias no CSS e Styling

CSS Modules Aprimorados

/* styles/component.module.css */
.container {
  padding: 1rem;

  /* Novo: suporte nativo a container queries */
  @container (min-width: 400px) {
    padding: 2rem;
  }
}

.title {
  font-size: 1.5rem;

  /* Novo: melhor suporte a CSS Grid */
  display: grid;
  grid-template-columns: subgrid;
}

Tailwind CSS Otimizado

// tailwind.config.js
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Nova sintaxe otimizada para Next.js 15
      fontFamily: {
        custom: ["var(--font-custom)"],
      },
    },
  },
};

🔧 Server Actions Melhorados

Sintaxe Simplificada

// app/contact/page.js
async function submitForm(formData) {
  "use server";

  const name = formData.get("name");
  const email = formData.get("email");

  // Validação e processamento
  if (!name || !email) {
    throw new Error("Nome e email são obrigatórios");
  }

  // Salvar no banco de dados
  await saveContact({ name, email });

  // Revalidar cache se necessário
  revalidatePath("/contacts");
}

export default function ContactForm() {
  return (
    <form action={submitForm}>
      <input name="name" type="text" required />
      <input name="email" type="email" required />
      <button type="submit">Enviar</button>
    </form>
  );
}

Error Handling Aprimorado

// app/contact/page.js
import { redirect } from "next/navigation";

async function submitForm(formData) {
  "use server";

  try {
    // Processamento do formulário
    await processForm(formData);

    // Sucesso - redirecionar
    redirect("/thank-you");
  } catch (error) {
    // Erro - retornar estado de erro
    return {
      error: error.message,
      success: false,
    };
  }
}

🌐 Melhores Práticas de Migration

1. Atualizando Gradualmente

# 1. Atualizar para Next.js 15
npm install next@15 react@19 react-dom@19

# 2. Executar codemod para migração automática
npx @next/codemod@latest next-async-request-api ./app

2. Testando Async Request APIs

// Antes
export default function Page({ params, searchParams }) {
  const { slug } = params;
  const { page } = searchParams;

  return <div>Page {page} for {slug}</div>;
}

// Depois
export default async function Page({ params, searchParams }) {
  const { slug } = await params;
  const { page } = await searchParams;

  return <div>Page {page} for {slug}</div>;
}

3. Configuração de TypeScript

// types/next.d.ts
import { NextRequest } from "next/server";

declare global {
  namespace Next {
    interface PageProps {
      params: Promise<{ [key: string]: string | string[] }>;
      searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
    }
  }
}

📊 Monitoramento e Performance

Built-in Analytics

// next.config.js
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Novo: analytics melhorado
  analytics: {
    provider: "vercel", // ou custom
  },
};

Métricas de Performance

// app/layout.js
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

🚨 Breaking Changes e Considerações

1. Node.js 18.17+ Obrigatório

# Verificar versão do Node.js
node --version

# Atualizar se necessário
nvm install 18.17
nvm use 18.17

2. Mudanças no fetch()

// Antes: cache infinito por padrão
fetch("https://api.example.com/data");

// Agora: sem cache por padrão
fetch("https://api.example.com/data");

// Para cache, especificar explicitamente
fetch("https://api.example.com/data", {
  next: { revalidate: 3600 },
});

🎯 Conclusão

O Next.js 15 representa um grande salto em performance e experiência do desenvolvedor. As principais vantagens incluem:

• React Compiler para otimizações automáticas
• Async Request APIs para melhor performance
• Turbopack significativamente mais rápido
• Novo sistema de cache mais previsível
• Server Actions aprimorados

Próximos Passos

1. Teste em desenvolvimento: Crie um projeto novo para experimentar
2. Migração gradual: Use codemods para facilitar a transição
3. Monitore performance: Aproveite as novas ferramentas de analytics
4. Explore o React Compiler: Teste em componentes específicos primeiro

O Next.js 15 consolida a plataforma como a escolha definitiva para aplicações React modernas, combinando performance excepcional com uma experiência de desenvolvimento superior.

---

Gostou do guia? Compartilhe com outros desenvolvedores e comece a explorar essas novas funcionalidades hoje mesmo! 🚀