Next.js 15

Next.js 15 extends React with routing, server-side rendering, and production optimizations. The framework provides conventions that guide development patterns and enable AI-assisted workflows.

Server Components

React Server Components execute on the server and return HTML to the client. This architecture enables direct database access without API endpoints:

// Runs on server, accesses database directly
async function ProductList() {
  const products = await db.products.findMany();

  return (
    <div>
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

Sensitive operations remain on the server. HTML streams to browsers for immediate display.

File-Based Routing

The App Router maps file system structure to URL paths:

Special files handle common patterns:

• layout.tsx provides shared UI across routes
• loading.tsx displays during data fetching
• error.tsx handles error boundaries
• route.tsx creates API endpoints

This structure provides predictable patterns for both developers and AI tools.

Built-in Optimizations

The framework optimizes assets and delivery automatically:

Image optimization resizes images for device screens and converts to modern formats. The next/image component implements lazy loading and prevents layout shift.

Font optimization eliminates layout shift through font display strategies. Critical CSS inlines automatically.

Code splitting occurs at route boundaries. Each page loads only its required JavaScript. Link components prefetch routes on hover.

Script optimization defers third-party scripts to prevent render blocking. The framework prioritizes critical resources.

TypeScript Integration

TypeScript support includes automatic type generation from file structure:

// Types inferred from directory structure
export default async function Page({
  params
}: {
  params: { id: string }
}) {
  // params.id has correct type
}

Route parameters, search params, and metadata exports receive proper types. This integration enables AI tools to generate type-safe code.

Streaming and Suspense

React 18's streaming SSR works with Next.js components:

export default function Layout({ children }) {
  return (
    <>
      <Header /> {/* Renders immediately */}
      <Suspense fallback={<Loading />}>
        {children} {/* Streams when ready */}
      </Suspense>
    </>
  );
}

Content streams progressively as data becomes available. Users see page structure immediately while dynamic content loads.

Edge Runtime

The Edge Runtime executes code closer to users:

export const runtime = 'edge'; // Runs on edge network

export async function GET() {
  // Executes near user location
  return Response.json({ timestamp: Date.now() });
}

Edge functions reduce latency for global applications. The runtime subset ensures consistent performance.

Caching Strategies

Next.js 15 provides granular cache control:

// Force dynamic rendering
export const dynamic = 'force-dynamic';

// Cache for 1 hour
export const revalidate = 3600;

// No caching
export const fetchCache = 'force-no-store';

These directives control rendering behavior per route. Static content serves from CDN while dynamic content updates as needed.

Async Request APIs

Next.js 15 makes request objects asynchronous to reflect their true cost:

import { headers, cookies } from 'next/headers';

export async function GET() {
  const headersList = await headers();
  const cookieStore = await cookies();

  const token = cookieStore.get('token');
  const userAgent = headersList.get('user-agent');
}

This change prevents accidental performance issues from synchronous header access.

Development Features

The development environment includes:

• Fast Refresh preserves component state during edits
• Error overlays display detailed error information
• TypeScript checking runs in parallel with builds
• Server logs appear in the terminal

These features create a feedback loop that supports rapid iteration.

AI Development Patterns

The framework's conventions enable consistent AI code generation:

1. File paths map directly to routes
2. Component patterns repeat across pages
3. TypeScript provides generation constraints
4. Server/client boundaries are explicit

When AI generates a new page, the patterns guide correct implementation. The structure becomes self-documenting for both humans and AI assistants.

Related Documentation

Additional Resources