nextjs-16

App Router File Conventions

app/
├── layout.tsx           # Root layout (required)
├── page.tsx             # Home page (/)
├── loading.tsx          # Loading UI (Suspense)
├── error.tsx            # Error boundary
├── not-found.tsx        # 404 page
├── (auth)/              # Route group (no URL impact)
│   ├── login/page.tsx   # /login
│   └── signup/page.tsx  # /signup
├── api/
│   └── route.ts         # API handler
└── _components/         # Private folder (not routed)

Next.js 16 Notes

• Use proxy.ts for request-boundary logic. middleware.ts is deprecated in Next.js 16.
• proxy.ts runs on the Node.js runtime and cannot be configured for Edge.
• Keep proxy.ts matchers narrow. Exclude api, static files, and image assets unless the route explicitly needs proxy logic.
• Route Handlers in app/api/**/route.ts are the right fit for health checks, webhooks, backend-for-frontend endpoints, and server-only proxy calls.

Server Components (Default)

// No directive needed - async by default
export default async function Page() {
  const data = await db.query();
  return <Component data={data} />;
}

Server Actions

"use server";

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

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

  await db.users.create({ data: { name } });

  revalidatePath("/users");
  redirect("/users");
}

Data Fetching

async function Page() {
  const [users, posts] = await Promise.all([getUsers(), getPosts()]);

  return <Dashboard users={users} posts={posts} />;
}

<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>;

Caching and Revalidation

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

export async function refreshDashboard() {
  "use server";

  revalidatePath("/");
  revalidateTag("dashboard");
}

• Use revalidatePath for route-level invalidation after mutations.
• Use revalidateTag when data fetches share a cache tag across routes.
• With Cache Components enabled, put "use cache" only in pure server-side cached functions. Do not cache auth, tenant-scoped, or per-user responses unless the cache key explicitly isolates them.