Next.js 15 Complete Guide: Everything New in 2025

tsx
// This runs on the server - no "use client" directive needed
async function ProductPage({ params }) {
  const product = await db.products.findOne({ id: params.id });
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={product.id} />
    </div>
  );
}

tsx
// This runs on the client
"use client"
function AddToCartButton({ productId }) {
  const [loading, setLoading] = useState(false);
  
  return (
    <button onClick={() => addToCart(productId)}>
      Add to Cart
    </button>
  );
}

tsx
export default async function Dashboard() {
  return (
    <div>
      {/* This is statically generated at build time */}
      <Header />
      <Sidebar />
      
      {/* This streams in dynamically */}
      <Suspense fallback={<Loading />}>
        <UserData />  {/* Dynamic - fetches user-specific data */}
      </Suspense>
      
      {/* Static again */}
      <Footer />
    </div>
  );
}

tsx
"use server"
async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.posts.insert({ title, createdAt: new Date() });
  revalidatePath('/blog');
}

// In your component
<form action={createPost}>
  <input name="title" />
  <button type="submit">Create Post</button>
</form>