Next.js 15: Overview of New Features

Next.js 15 just released with its exciting new features! As a developer who uses Next.js daily for my SaaS projects, I've tested the main functionalities. Here's my detailed analysis.

This version's highlights

Full React 19 support

Next.js 15 officially integrates React 19 with all its new features:

• React Compiler: Automatic optimizations without useMemo/useCallback
• Enhanced Server Actions: Better integration with forms
• Refined Suspense: More fine-grained loading management

// Before React 19
const memoizedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

// With React 19 + Compiler
const value = expensiveCalculation(data); // Automatically optimized!

App Router as default

The App Router becomes the official recommendation:

• Pages Router: Still supported but legacy
• Facilitated migrations: Tools to migrate progressively
• Improved performance: App Router-specific optimizations

Performance improvements

Stable Turbopack

Vercel's revolutionary bundler finally comes out in stable version:

• 10x faster than Webpack in development
• Near-instantaneous Hot Reload on large projects
• Improved tree-shaking for lighter bundles

# Enable Turbopack
next dev --turbo

Image optimizations

The Image component gets even better:

• New formats: Native AVIF and WebP support
• Smart lazy loading: Viewport-based prediction
• Automatic optimizations: Adaptive compression based on device

import Image from 'next/image';

// New props for fine control
<Image
  src="/hero.jpg"
  alt="Hero image"
  priority={true}
  quality={95}
  format="avif" // New!
  loading="eager"
/>

Developer experience improvements

TypeScript 5.0+ required

Next.js 15 requires TypeScript 5.0 minimum:

• Enhanced type safety on API routes
• Improved inference for metadata
• Clearer errors in case of typing issues

Ultra-fast Hot Module Replacement

Development updates are now near-instantaneous:

• State preservation: No more form data loss
• Overlay errors: Facilitated debugging
• CSS-in-JS support: Hot reload for styled-components and emotion

New APIs and features

Enhanced Metadata API

More fine-grained metadata management:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        }
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Simplified Server Actions

Server Actions become more intuitive:

// actions/blog.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  // Automatic validation
  if (!title || !content) {
    throw new Error('Title and content are required');
  }

  // Database save
  await db.post.create({
    data: { title, content }
  });

  revalidatePath('/blog');
  redirect('/blog');
}

Migration from Next.js 14

Recommended steps

1. Update dependencies

npm install next@15 react@19 react-dom@19
npm install -D @types/react@19 @types/react-dom@19

2. Configure Turbopack

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // Custom loaders configuration
      }
    }
  }
}

3. Progressive App Router migration

• Start with new pages
• Migrate route by route
• Test Server Components

Breaking changes to watch

• Node.js 18.17 minimum required
• Some deprecated APIs in Pages Router
• Subtle changes in fetch behavior

My experience feedback

What impresses me most

1. Development speed: Turbopack really makes a difference
2. Improved DX: Less configuration, more productivity
3. Runtime performance: Faster applications in production

Points of attention

• Learning curve: App Router requires a mindset change
• Ecosystem: Not all packages are React 19 compatible yet
• Debugging: New tools to master

Should I migrate now?

✅ Yes if:

• You're starting a new project
• Your team already masters the App Router
• You want the latest optimizations

⏳ Wait if:

• Your project uses many legacy dependencies
• You don't have time for a complete migration
• Your team isn't familiar with Server Components

Conclusion

Next.js 15 marks an important step in the framework's evolution. With React 19, stable Turbopack, and DX improvements, it's a version worth checking out.

For my future client projects, I'll definitely start with Next.js 15. The productivity gained far outweighs the adaptation time.

Have you tested Next.js 15 yet? What are your first impressions?