Next.js 15 Cheat Sheet

Welcome to the ultimate Next.js 15 Cheat Sheet, the ready reference for the new features and changes in Next.js 15.

Key Features & Improvements

1. React 19 (Optional Canary Support)

• Try out the new React 19 features like Actions, use() , and Optimistic Updates.
• To enable React 19 in your Next.js 15 project, add this to your config:

// next.config.js  

module.exports = { experimental: { reactCompiler: true } }

Why It Matters: Experiment with future React features today while keeping your app stable. Great for early adopters!

2. Partial Prerendering (PPR)

• Mix static and dynamic content on the same page.
• Example:

// app/page.js  

export default function Page() {  

  return (  

    <div>  

      {/* Static: Loads instantly */}  

      <StaticHeader />  

      {/* Dynamic: Loads later */}  

      <Suspense fallback="Loading..."><LiveData /></Suspense>  

    </div>  

  );  

}

• To enable, add this to your config:

experimental: { ppr: true }

Why It Matters: Users see pages instantly (static parts) while dynamic content loads quietly. Boosts SEO and user retention!

3. Turbopack (Stable for Dev)

• Super-fast local development.

next dev --turbo  # Cold starts now take around 2 seconds

Why It Matters: Developers save hours monthly waiting for builds. Ideal for large projects!

4. Async Request APIs

• You can now use await for headers, cookies, and URL params.

// app/page.js  

export default async function Page({ params }) {  

  const slug = await params.slug;  

  return <div>{slug}</div>;  

}

Why It Matters: Prevents UI freezes during data fetching. Smoother user experiences!

5. Caching Changes

• By default, fetch() and GET routes no longer cache.
• To force caching, use this:

fetch(url, { cache: 'force-cache' });  // This mimics the old behavior

Why It Matters: Fresh data by default for real-time apps (e.g., dashboards), while keeping blogs fast. Best of both worlds!

6. Improved Hydration Errors

• More descriptive error messages to help you spot mismatches like: “Server: ‘Submit’ vs Client: ‘Send’”

Why It Matters: Fix bugs 2x faster with precise error locations. No more guessing games!

7. Experimental unstable_after

• Run tasks after sending a response (e.g., send emails in the background):

// app/api/signup/route.js  

import { unstable_after as after } from 'next/server';  

export async function POST() {  

  after(() => { console.log('Email sent!') });  

  return Response.json({ success: true });  

}

Why It Matters: Handle background tasks (emails/analytics) without slowing users. Perfect for e-commerce!

8. TypeScript in Config

• Add types to your next.config.ts :

import type { NextConfig } from 'next';  

const config: NextConfig = { /*...*/ };  

export default config;

Why It Matters: Catch config errors before deployment. Essential for teams!

9. Security Enhancements

• Server Actions now auto-generate unique IDs to prevent tampering.

Why It Matters: Blocks malicious form submissions. Critical for login/checkout flows!

10. ESLint 9 Support

• Update ESLint for better compatibility:

npm install eslint@latest

Why It Matters: Stricter rules catch bugs early. Keep codebases clean!

Breaking Changes

• @next/font is removed; use next/font instead.
• bundlePagesRouterDependencies has been renamed to bundleAppRouterDependencies .
• serverExternalPackages is now correctly spelled (was a typo before).

How to Upgrade

1. Update Packages:

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

2. Run Codemods (Automate fixes):

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

3. Test Caching:

• Add cache: ‘force-cache’ to critical fetch calls.
• Check your route handlers for explicit caching.

4. Check Async APIs:

• Don’t forget to add await to headers(), cookies(), and searchParams.

FAQs

Pro Tips

• Use next dev –turbo for faster local development.
• Migrate incrementally—no need to rewrite everything all at once.
• For SEO, combine static content (PPR) with dynamic widgets.

Bookmark this cheat sheet!

To dive deeper into mastering Next.js 15, check out my full guide here: A Guide to understand Next.js 15: Master New Features with Simple Examples & Tips

For the official documentation on Next.js 15, visit: Next.js 15 Documentation