Next.js 15 Development Guide

# Next.js 15 Development Guide for Google Antigravity

Master Next.js 15 for production applications with Google Antigravity IDE. This comprehensive guide covers the new Turbopack dev server, improved caching, Partial Prerendering, Server Actions enhancements, and performance optimizations in the latest Next.js release.

## Configuration

Configure your Antigravity environment for Next.js 15:

```typescript
// .antigravity/nextjs15.ts
export const nextConfig = {
  version: "15.x",
  features: {
    turbopack: true,
    ppr: true,
    serverActions: true,
    staleTimes: true
  },
  caching: {
    defaultStaleTime: 300,
    revalidateTag: true
  }
};
```

## Turbopack Configuration

Enable Turbopack for faster development:

```typescript
// next.config.ts
import type { NextConfig } from "next";

const config: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js"
        }
      },
      resolveAlias: {
        underscore: "lodash"
      }
    },
    ppr: true
  }
};

export default config;
```

## Partial Prerendering

Combine static and dynamic content:

```typescript
// app/products/page.tsx
import { Suspense } from "react";
import { unstable_noStore as noStore } from "next/cache";

// Static shell - prerendered at build time
export default function ProductsPage() {
  return (
    <div className="products-page">
      <h1>Our Products</h1>
      <StaticHeader />
      
      <Suspense fallback={<ProductGridSkeleton />}>
        <DynamicProductGrid />
      </Suspense>
      
      <StaticFooter />
    </div>
  );
}

// Dynamic component - rendered on request
async function DynamicProductGrid() {
  noStore();
  
  const products = await fetch("https://api.example.com/products", {
    cache: "no-store"
  }).then(r => r.json());

  return (
    <div className="product-grid">
      {products.map((product: Product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Static components - included in prerender
function StaticHeader() {
  return (
    <header>
      <nav>...</nav>
    </header>
  );
}
```

## Enhanced Server Actions

Use improved Server Actions:

```typescript
// app/actions.ts
"use server";

import { revalidateTag, revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createProduct(formData: FormData) {
  const data = {
    name: formData.get("name") as string,
    price: parseFloat(formData.get("price") as string),
    description: formData.get("description") as string
  };

  const product = await db.product.create({ data });

  revalidateTag("products");
  revalidatePath("/products");
  
  redirect(`/products/${product.id}`);
}

// With validation
import { z } from "zod";

const productSchema = z.object({
  name: z.string().min(1).max(100),
  price: z.number().positive(),
  description: z.string().max(1000)
});

export async function createValidatedProduct(formData: FormData) {
  const rawData = {
    name: formData.get("name"),
    price: parseFloat(formData.get("price") as string),
    description: formData.get("description")
  };

  const result = productSchema.safeParse(rawData);
  
  if (!result.success) {
    return { error: result.error.flatten() };
  }

  const product = await db.product.create({ data: result.data });
  
  revalidateTag("products");
  return { success: true, product };
}
```

## Caching Strategies

Configure granular caching:

```typescript
// app/api/products/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const products = await db.product.findMany();

  return NextResponse.json(products, {
    headers: {
      "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300"
    }
  });
}

// Using fetch with caching options
async function getProduct(id: string) {
  const response = await fetch(`https://api.example.com/products/${id}`, {
    next: {
      revalidate: 3600,
      tags: ["product", `product-${id}`]
    }
  });
  
  return response.json();
}

// Force dynamic rendering
import { unstable_noStore as noStore } from "next/cache";

async function getDynamicData() {
  noStore();
  return await fetchRealTimeData();
}

// On-demand revalidation
import { revalidateTag } from "next/cache";

export async function updateProduct(id: string, data: ProductData) {
  await db.product.update({ where: { id }, data });
  
  revalidateTag("products");
  revalidateTag(`product-${id}`);
}
```

## Parallel Data Fetching

Optimize data loading:

```typescript
// app/dashboard/page.tsx
async function DashboardPage() {
  const [user, stats, notifications] = await Promise.all([
    getUser(),
    getStats(),
    getNotifications()
  ]);

  return (
    <div className="dashboard">
      <UserCard user={user} />
      <StatsGrid stats={stats} />
      <NotificationList notifications={notifications} />
    </div>
  );
}

// With error boundaries per section
export default async function Dashboard() {
  return (
    <div className="dashboard">
      <Suspense fallback={<UserCardSkeleton />}>
        <ErrorBoundary fallback={<UserCardError />}>
          <UserSection />
        </ErrorBoundary>
      </Suspense>
      
      <Suspense fallback={<StatsSkeleton />}>
        <ErrorBoundary fallback={<StatsError />}>
          <StatsSection />
        </ErrorBoundary>
      </Suspense>
    </div>
  );
}
```

## Best Practices

Follow these guidelines for Next.js 15:

1. **Use Turbopack** - Faster development builds
2. **Enable PPR** - Best of static and dynamic
3. **Tag-based revalidation** - Granular cache control
4. **Parallel fetching** - Avoid waterfalls
5. **Server Actions** - Simplified mutations
6. **Streaming** - Progressive rendering

Google Antigravity IDE provides intelligent Next.js 15 scaffolding and performance optimization suggestions.