Next.js 16 introduces powerful paradigms with Server Actions and enhanced Metadata APIs. Let's master the App Router.
Thinking in Server Components
By default, everything in the app directory is a Server Component. This means they run only on the server, have zero bundle size impact, and can access your database directly.
app/page.tsx
class="text-purple-400 font-medium">import { db } from '@/lib/db';
class="text-purple-400 font-medium">export class="text-purple-400 font-medium">default async class="text-purple-400 font-medium">function Page() {
// This runs on the server!
class="text-purple-400 font-medium">const users = await db.user.findMany();
class="text-purple-400 font-medium">return (
<main>
<h1>Users</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</main>
);
}Server Actions: Goodbye API Routes?
You no longer need to create an API route just to handle a form submission. Server Actions allow you to define server-side logic directly alongside your components.
app/actions.ts
'use server'
class="text-purple-400 font-medium">export async class="text-purple-400 font-medium">function createUser(formData: FormData) {
class="text-purple-400 font-medium">const name = formData.get('name');
await db.user.create({ data: { name } });
revalidatePath('/users');
}Streaming with Suspense
Don't block the entire page rendering for slow data. Use Suspense to show a loading UI instantly while the heavy parts fetch data in the background.
Next.jsReactFrontend