Next.js 15 introduced several improvements, such as React 19 support, improved caching, Turbopack for faster builds, server actions, and enhanced form handling. Below are practical examples demonstrating these new features.

1. Using `router.refresh()` for Cache Refreshing

In Next.js 15, you can manually refresh data when needed using router.refresh().

Example: Manually Refreshing Cached Data

"use client";

import { useRouter } from "next/navigation";

export default function RefreshExample() {
    const router = useRouter();

    return (
        <div>
            <button onClick={() => router.refresh()}>
                Refresh Data
            </button>
        </div>
    );
}

🔹 Benefit: Ensures that cached data updates when necessary without a full page reload.

2. Server Actions with `use server`

Next.js 15 improves server actions, allowing secure form handling without API routes.

Example: Using a Server Action for Form Submission

"use client";

import { useState } from "react";

export default function FormExample() {
    const [message, setMessage] = useState("");

    async function submitForm(formData: FormData) {
        "use server";  // Marks this function as a server action

        const name = formData.get("name");
        return `Hello, ${name}!`;
    }

    return (
        <form action={async (formData) => {
            const response = await submitForm(formData);
            setMessage(response);
        }}>
            <input type="text" name="name" placeholder="Enter your name" required />
            <button type="submit">Submit</button>
            <p>{message}</p>
        </form>
    );
}

🔹 Benefit: Eliminates the need for an API route, improving performance.

3. Using `next.config.ts` for Type-Safe Configuration

Next.js 15 now supports TypeScript configuration in next.config.ts.

Example: TypeScript-based Next.js Configuration

import { NextConfig } from "next";

const nextConfig: NextConfig = {
    reactStrictMode: true,
    experimental: {
        serverActions: true, // Enabling Server Actions
    },
};

export default nextConfig;

🔹 Benefit: Better type safety when configuring Next.js applications.

4. Faster Development with Turbopack

Turbopack significantly speeds up local development.

How to Enable Turbopack in Development Mode

Run the following command:

next dev --turbo

🔹 Benefit: Reduces build times and speeds up hot module replacement (HMR).

5. Using React 19's New Features in Next.js 15

Next.js 15 fully supports React 19, including use hook for async/await.

Example: Using `use` for Async Data Fetching

import { use } from "react";

async function fetchData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    return res.json();
}

export default function Page() {
    const data = use(fetchData());

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.body}</p>
        </div>
    );
}

🔹 Benefit: Simplifies fetching and using async data in components.

Improvment

Next.js 15 brings performance optimizations, server actions, improved caching, and better developer experience.

Next js 15

1. Using router.refresh() for Cache Refreshing