sayyedabrarakhtar.com.np
theme
~/portfolio
Tech8 min read

Next.js 15 App Router Best Practices & Server Actions in 2025

By Sayyed Abrar Akhtar โ€ข Published 2025-02-28
Master asynchronous request handling, React Server Components (RSC), dynamic metadata, and secure Server Actions in Next.js 15 with zero dynamic API runtime warnings.

Next.js 15 introduces key refinements to server component caching, dynamic request APIs, and async request handling. In this guide, we explore how to build resilient web applications with full type safety and maximum SEO performance.

Key Highlights of Next.js 15

  1. **Async Request APIs**: `cookies()`, `headers()`, and `params` are now asynchronous promises, preventing common runtime timing issues.
  2. **Uncached fetch By Default**: Fetch requests are no longer cached by default in server components, giving developers explicit control over cache lifetime with `staleTimes`.
  3. **Enhanced React 19 Support**: Full integration with React 19 features including `useActionState` and `useOptimistic`.

Async Params in Next.js 15

In Next.js 15, route parameters are asynchronous Promises that must be awaited before accessing properties:

// Example of Next.js 15 Async Params Page Component
interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

export default async function Page({ params, searchParams }: PageProps) { const { slug } = await params; const query = await searchParams;

return ( <main className="p-6"> <h1 className="text-2xl font-bold">Article Slug: {slug}</h1> <p>Search Query: {query.q || 'None'}</p> </main> ); } ```

---

Modern Server Actions Strategy

Server Actions allow seamless backend execution directly from React components without creating separate API handlers:


'use server'

import { revalidatePath } from 'next/cache';

export async function updateProfile(formData: FormData) { const name = formData.get('name') as string;

if (!name || name.length < 2) { return { error: 'Name must be at least 2 characters long' }; }

// Database update simulation await db.user.update({ where: { id: 1 }, data: { name } });

revalidatePath('/profile'); return { success: true }; } ```

By organizing code into dedicated action handlers and taking advantage of streaming SSR with Suspense, your application achieves minimal Time-To-Interactive (TTI) and pristine Core Web Vitals performance.

Tags:#Next.js#React#TypeScript#Web Development

Related Tech Articles

โ† Back to All Articles
available for workKathmandu, Nepal ๐Ÿ‡ณ๐Ÿ‡ตcontact@sayyedabrarakhtar.com.np