What’s New in Next.js 15? A Developer’s Guide to the Latest Features

Introduction

Next.js 15 is here! 🎉 This update brings better caching, React 19 support, Turbopack improvements, and new APIs that make development smoother and more efficient.

In this post, we’ll explore the top features of Next.js 15, how they impact your development workflow, and why you should upgrade.

---

1️⃣ Full Support for React 19 🚀

Next.js 15 now supports React 19, allowing you to take advantage of the latest React features while maintaining compatibility with the Pages Router (React 18).

Why This Matters?

• Better performance with React Compiler
• Enhanced React Server Components
• Improved Suspense and Streaming

If you’re using the App Router, you can start experimenting with React 19 Release Candidate (RC) today!

---

2️⃣ Smarter Caching for Faster Page Loads ⚡

Next.js 15 introduces stale-while-revalidate (SWR) caching updates for a more dynamic user experience.

What Changed?

• New default: staleTime: 0 → Always shows fresh data
• Customize cache behavior in next.config.ts

Example: Customizing Cache Behavior

export default function Page() {  
  return <h1>Next.js 15 Caching Updates!</h1>;  
}  

export const metadata = {  
  revalidate: 60, // Data refreshes every 60 seconds  
};  

👉 Faster navigation with fresh content

👉 Control over cache updates

---

3️⃣ Turbopack: Faster Development Builds 🚀

Turbopack, the next-gen JavaScript bundler, is now stable for development in Next.js 15.

Why Use Turbopack?

🔹 10x faster HMR (Hot Module Replacement)

🔹 Optimized for large-scale projects

🔹 Future-proof performance

How to Enable Turbopack?

NEXT_USE_TURBOPACK=1 next dev  

🔥 Faster reloads = More productivity!

---

4️⃣ New API: useActionState Hook 🎯

Next.js 15 replaces useFormState with a more flexible useActionState hook for handling forms and actions.

Example: Using useActionState in Next.js 15

"use client";  
import { useActionState } from "react";  

export default function FormComponent() {  
  const [state, formAction] = useActionState(async (prevState, formData) => {  
    const res = await fetch("/api/submit", { method: "POST", body: formData });  
    return res.json();  
  }, null);  

  return (  
    <form action={formAction}>  
      <input name="name" required />  
      <button type="submit">Submit</button>  
      {state?.message && <p>{state.message}</p>}  
    </form>  
  );  
}  

👉 Improved handling of form submissions

👉 More control over form states

---

5️⃣ Improved useFormStatus Hook 🛠️

The useFormStatus hook now provides extra keys like:

🔹 data (submitted form data)

🔹 method (form submission type)

🔹 action (form submission handler)

Example: Using useFormStatus in Next.js 15

"use client";  
import { useFormStatus } from "react";  

export default function SubmitButton() {  
  const { pending } = useFormStatus();  

  return <button disabled={pending}>{pending ? "Submitting..." : "Submit"}</button>;  
}  

👉 Better feedback for users during form submission

---

Conclusion: Why Upgrade to Next.js 15?

Next.js 15 brings performance boosts, caching improvements, and better API handling. If you’re working on a modern frontend project, upgrading to Next.js 15 will make your development experience faster and more efficient.