Introduction to Next.js 15

Next.js 15 represents a significant leap forward in React development. With enhanced server actions, partial prerendering, and improved developer experience, it's designed to build faster, more efficient web applications.

This guide covers the most important features and how to leverage them in your projects.

Enhanced Server Actions

Server actions are now more powerful and easier to use, enabling seamless server-side mutations without API routes.

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createTodo(formData: FormData) {
  const title = formData.get('title') as string
  
  // Database operation
  await db.todo.create({
    data: { title }
  })
  
  // Revalidate cache
  revalidatePath('/todos')
  
  // Optional redirect
  redirect('/todos')
}

// With validation
import { z } from 'zod'

const todoSchema = z.object({
  title: z.string().min(1).max(100),
  completed: z.boolean().default(false)
})

export async function createTodoValidated(formData: FormData) {
  const data = todoSchema.parse({
    title: formData.get('title'),
    completed: formData.get('completed') === 'true'
  })
  
  await db.todo.create({ data })
  revalidatePath('/todos')
}

// Using in component
// app/todos/page.tsx
import { createTodo } from '@/app/actions'

export default function TodosPage() {
  return (
    <form action={createTodo}>
      <input name="title" type="text" required />
      <button type="submit">Add Todo</button>
    </form>
  )
}

Server Action Best Practices

•Always validate input data
•Use revalidatePath for cache updates
•Handle errors gracefully with try-catch

Partial Prerendering (PPR)

Partial Prerendering allows you to serve a static shell with dynamic holes, combining the best of static and dynamic rendering.

// next.config.js
module.exports = {
  experimental: {
    ppr: true
  }
}

// app/dashboard/page.tsx
import { Suspense } from 'react'

export const experimental_ppr = true

export default function Dashboard() {
  return (
    <div>
      {/* Static shell - served immediately */}
      <header>Dashboard</header>
      <nav>Navigation</nav>
      
      {/* Dynamic content - streamed in */}
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>
      
      <Suspense fallback={<RecentActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  )
}

// Dynamic component
async function Stats() {
  const stats = await getStats()
  return <div>{stats}</div>
}

// Streaming with boundaries
export default function Page() {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
      <StaticFooter />
    </main>
  )
}

Improved App Router

The App Router receives significant improvements with better routing, loading states, and error handling.

// Route groups with better organization
app/
  (marketing)/
    page.tsx
    about/
      page.tsx
  (dashboard)/
    layout.tsx
    page.tsx
    settings/
      page.tsx

// Parallel routes
app/
  @auth/
    layout.tsx
    login/page.tsx
  @dashboard/
    layout.tsx
    page.tsx

// Intercepting routes
app/
  feed/
    [...slug]/
      page.tsx
  photo/
    [id]/
      (.)page.tsx  // Modal overlay
      (..)page.tsx // Full page

// Improved loading states
// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-3/4 mb-4" />
      <div className="h-4 bg-gray-200 rounded w-1/2" />
    </div>
  )
}

// Better error handling
// app/dashboard/error.tsx
'use client'

export default function Error({
  error,
  reset
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

Performance Improvements

Next.js 15 introduces significant performance optimizations for faster builds and runtime performance.

// Turbopack improvements
// next.config.js
module.exports = {
  turbo: {
    rules: [
      {
        test: /.svg$/,
        use: ['@svgr/webpack']
      }
    ]
  }
}

// Improved caching
// app/products/page.tsx
export const revalidate = 3600 // 1 hour

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }
  }).then(r => r.json())
  
  return <ProductList products={products} />
}

// On-demand revalidation
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const path = await request.json()
  revalidatePath(path.path)
  return NextResponse.json({ revalidated: true })
}

// Image optimization improvements
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // Above the fold
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Enhanced Developer Experience

Better tooling, improved error messages, and enhanced debugging capabilities.

// Improved TypeScript support
// next.config.js
module.exports = {
  typescript: {
    // Built-in type checking
    ignoreBuildErrors: false
  }
}

// Better error overlay
// Automatic error recovery
// Stack trace improvements
// Source map enhancements

// Environment variables
// .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...

// Usage in code
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const dbUrl = process.env.DATABASE_URL

// Environment-specific configs
// app/config.ts
export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL!,
  isDev: process.env.NODE_ENV === 'development'
}

// Improved CLI
npx next@latest dev --turbo
npx next@latest build --debug
npx next@latest start --port 3001

Enhanced Metadata API

More powerful and flexible metadata management for SEO and social sharing.

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props
): Promise<Metadata> {
  const post = await getPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name]
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage]
    },
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`
    }
  }
}

// Dynamic icons
export const icons = {
  icon: '/favicon.ico',
  apple: '/apple-icon.png'
}

// Manifest
export const manifest = '/manifest.json'

Next.js 15 Best Practices

Performance

• Use PPR for mixed static/dynamic pages
• Implement proper caching strategies
• Optimize images with next/image
• Leverage server actions for mutations

Architecture

• Organize routes with route groups
• Use parallel routes when appropriate
• Implement proper error boundaries
• Structure layouts hierarchically

Development

• Use Turbopack for faster builds
• Implement proper TypeScript types
• Use environment variables correctly
• Test server actions thoroughly

SEO

• Use dynamic metadata generation
• Implement proper sitemaps
• Use structured data
• Optimize for Core Web Vitals

Conclusion

Next.js 15 brings powerful new features that significantly improve the developer experience and application performance. Server actions, partial prerendering, and enhanced routing make it easier than ever to build modern web applications.

Start adopting these features gradually and leverage them to build faster, more efficient applications.

Ready to Build with Next.js 15?

Explore more Next.js tutorials and start building amazing applications!

Next.js 15 Features 2026: The Future of React Development