A Guide to understand Next.js 15: Master New Features with Simple Examples & Tips

Welcome to Next.js 15—Learn the hottest features (No Jargon, Just Results)

Hey there! If you’re new to Next.js, don’t worry—I’ve got your back. Let’s break down every feature in Next.js 15 using plain English, real-world examples, and zero jargon. By the end, you’ll feel confident using these tools like a pro. Ready? Let’s go!

1. React 19 Canary Support

What’s New?

Next.js 15 lets you test React 19 Canary features (like Actions, use(), and Optimistic Updates) before they’re stable.

How to Enable It:

// next.config.js  
module.exports = {  
  experimental: {  
    reactCompiler: true,  
  },  
};

Example – Fetch Data Without useEffect :

// Before:  
function UserProfile() {  
  const [user, setUser] = useState(null);  
  useEffect(() => {  
    fetchUser().then(setUser);  
  }, []);  
}  

// After (React 19’s use() hook):  
function UserProfile() {  
  const user = use(fetchUser()); // Cleaner!  
} 

Note: `use()` is experimental. Use it for non-critical features until React 19 stabilizes.

2. Partial Prerendering (PPR): Speed Meets Flexibility

What It Solves:
Imagine a pizza shop’s website:

• The menu (static) should load instantly.
• Live order tracking (dynamic) should update in real-time.

With PPR, you get both!

How It Works:

// app/menu/page.js  
export default function Menu() {  
  return (  
    <div>  
      {/* Static: Loads immediately */}  
      <PizzaMenu />  

      {/* Dynamic: Streams later */}  
      <Suspense fallback={<p>Loading your order...</p>}>  
        <LiveOrderTracker />  
      </Suspense>  
    </div>  
  );  
} 

Enable PPR:

// next.config.js  
experimental: { ppr: true }  

Why You’ll Love It:

• Users see the page instantly.
• Dynamic parts load in the background.

3. Turbopack: Lightning-Fast Development

What’s New:

Turbopack (Next.js’s super-fast build tool) is stable for local development.

How to Use It:

Run your dev server with the –turbo flag:

next dev --turbo 

Results:

• Cold starts drop from 10s to 2-3 seconds.
• Hot reloads take <1 second.

4. Async Request APIs: Streamlined Data Fetching

What Changed:

Fetching headers, cookies, or URL parameters now uses async functions and requires await.

Example:

// app/api/user/route.js  
export async function GET(request) {  
  // Wait for headers/cookies  
  const headers = await request.headers;  
  const cookies = await request.cookies();  
  const url = new URL(request.url);  
  const searchParams = url.searchParams;  

  return NextResponse.json({ user: "John" });  
}

Why It Matters:

• No more blocking operations.
• Cleaner, modern code.

Automate the Upgrade!

Next.js provides a codemod (automated tool) to add await to headers, cookies, and other async APIs. Run this command in your project root:

npx @next/codemod@latest next-async-request-api .

This will update your code automatically, saving you hours of manual work!

5. Caching Control Made Simple

Key Changes:

• fetch() no longer caches by default.
• Client-side router caches pages for 0 seconds (fresh data every load).
• You can use cache: ‘force-cache’ to force caching.

Force Caching:

// Force caching (like before)  
const data = await fetch(url, { cache: 'force-cache' });   

Manual Caching (Experimental):

import { unstable_cache } from 'next/cache';  
const data = await unstable_cache(fetchData, ['data-key']);  

Warning: unstable_cache is experimental. Avoid for critical production use.

6. Enhanced Forms with Server Actions

What Changed?

The official Next.js 15 docs don’t include a next/form component. Instead, forms are supercharged with React Server Actions and the useFormStatus/useFormState hooks.

Why It’s Better:

• Submit forms without full page reloads.
• Built-in loading states and error handling.
• Directly call server-side logic from your components.

Code Example – Modern Form Handling:

// app/contact/page.js  
'use client';  
import { useFormState, useFormStatus } from 'react-dom';  

// Server Action (can be in a separate file)  
async function sendMessage(prevState, formData) {  
  'use server';  
  try {  
    await emailService.send(formData.get('message'));  
    return { success: true };  
  } catch (error) {  
    return { error: 'Failed to send message!' };  
  }  
}  

function SubmitButton() {  
  const { pending } = useFormStatus();  
  return (  
    <button disabled={pending}>  
      {pending ? 'Sending... ✉️' : 'Send'}  
    </button>  
  );  
}  

export default function Contact() {  
  const [state, formAction] = useFormState(sendMessage, null);  

  return (  
    <form action={formAction}>  
      <input type="text" name="message" />  
      <SubmitButton />  
      {state?.error && <p className="error">{state.error}</p>}  
    </form>  
  );  
}  

Key Benefits:

• Loading States: The button disables automatically while submitting.
• Error Handling: Show friendly errors without extra code.
• No API Routes: Server Actions run directly on your server.

7. Improved Error Handling

What’s Better:

• Hydration errors now show exactly which component failed.
• Source code snippets highlight the issue.

Example Error Message:

Hydration failed because <Button> received server: "Submit" vs client: "Send"

Why It Rocks:

• Fix bugs faster.
• No more guessing games.

8. Static Route Indicator

New Visual Aid:

Pages marked as static now show a λ symbol in development mode.

How to Use It:

Just run next dev and check your browser’s console! When you run next dev , and view the console, you will see a lambda symbol (λ) next to static pages. Example: (λ) .

9. Unstable After (Experimental)

What It Does:

Run tasks after sending a response (e.g., send emails without delaying users).

Example:

// app/api/signup/route.js  
import { unstable_after as after } from 'next/server';  

export async function POST(request) {  
  const user = await createUser(request);  

  after(async () => {  
    await sendWelcomeEmail(user.email); // Runs in background  
  });  

  return NextResponse.redirect('/dashboard');  
}

Note: Enable with experimental.after: true in next.config.js .

10. TypeScript Support in next.config.js

Finally!
Add TypeScript types to your Next.js config:

// next.config.ts  
import type { NextConfig } from 'next';  

const config: NextConfig = {  
  /* Your config here */  
};  

export default config; 

11. Enhanced Security for Server Actions

New Protections:

• Server Actions get unique IDs to prevent tampering.
• Unused actions are removed during builds.

Example:

// Secure Server Action  
'use server';  

export async function deletePost(id: string) {  
  // Action ID generated automatically  
  await db.post.delete({ where: { id } });  
}  

12. ESLint 9 Support

Updated Tooling:

Next.js now works seamlessly with ESLint 9.

How to Upgrade:

npm install eslint@latest

13. Environment Variables

Safer Defaults:

create-next-app now ignores .env files by default.

To Enable:

Manually add .env to your project.

14. Cold Start & Build Time Optimizations

Faster Deployments:

• 50% faster cold starts on Vercel.
• Optimized build pipelines for large apps.

15. Breaking Changes You Must Know

a) @next/font is Gone

• Use next/font instead. Just update your imports:

// Before (old)
import { Inter } from '@next/font/google';
// After (new)
import { Inter } from 'next/font/google';

b) Renamed Configuration Options

• bundlePagesRouterDependencies → Now called bundleAppRouterDependencies.
• serverExternalPackages had a typo fix (no functional change).

c) use() Hook Requires React Canary

• If you’re using React 18, avoid use() until you upgrade to React 19.

FAQs for Beginners

Want to Go Deeper?

Refer Next.js 15 Official Documentation for details from the source itself.

OR, refer the Next.js 15 Cheat Sheet for quick reference.