Next.js

Next.js is the leading full-stack framework for React. Next.js 15 (2025) stabilizes the App Router and Server Actions, making it a robust platform for modern web apps.

When to Use

• Full-Stack React: You need API routes, DB access, and UI in one codebase.

• SEO Critical: Server-Side Rendering (SSR) is first-class.

• Vercel Ecosystem: seamless deployment to Vercel's edge network.

Quick Start (App Router)

// app/page.tsx (Server Component by default) import { db } from "@/lib/db";

export default async function Page() { const posts = await db.post.findMany(); // Direct DB access!

return ( <main> <h1>Blog</h1> {posts.map((post) => ( <p key={post.id}>{post.title}</p> ))} </main> ); }

Core Concepts

App Router (app/ dir)

File-system based routing where page.tsx is the UI, layout.tsx wraps children, and loading.tsx defines Suspense boundaries.

Server Components (RSC)

Components in app/ are Server Components by default. They can't use useState or useEffect . To add interactivity, add 'use client' to the top of a file.

Server Actions

Functions that run on the server, callable from the client (forms, buttons).

// actions.ts 'use server' export async function create(formData) { await db.post.create({ data: ... }); }

Best Practices (2025)

Do:

• Fetch in Server Components: Fetch data directly in your content (async components). No useEffect .

• Use revalidatePath : Revalidate cache on-demand after mutations (Server Actions).

• Partial Prerendering (PPR): (Experimental in '24, Stable in '25) Mix static shell with dynamic holes.

Don't:

• Don't leak secrets: Ensure 'use server' files don't export sensitive data.

• Don't use client everything: Only put 'use client' at the leaves of your tree (buttons, inputs). Keep high-level layouts as Server Components.

References

• Next.js Documentation