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)
Server Components (Default)
// No directive needed - async by default
export default async function Page() {
const data = await db.query();
return
Server Actions // app/actions.ts "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"); }
// Usage
Data Fetching
// Parallel
async function Page() {
const [users, posts] = await Promise.all([
getUsers(),
getPosts(),
]);
return
// Streaming with Suspense
Route Handlers (API) // app/api/users/route.ts import { NextRequest, NextResponse } from "next/server";
export async function GET(request: NextRequest) { const users = await db.users.findMany(); return NextResponse.json(users); }
export async function POST(request: NextRequest) { const body = await request.json(); const user = await db.users.create({ data: body }); return NextResponse.json(user, { status: 201 }); }
Middleware // middleware.ts (root level) import { NextResponse } from "next/server"; import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) { const token = request.cookies.get("token");
if (!token && request.nextUrl.pathname.startsWith("/dashboard")) { return NextResponse.redirect(new URL("/login", request.url)); }
return NextResponse.next(); }
export const config = { matcher: ["/dashboard/:path*"], };
Metadata // Static export const metadata = { title: "My App", description: "Description", };
// Dynamic export async function generateMetadata({ params }) { const product = await getProduct(params.id); return { title: product.name }; }
server-only Package import "server-only";
// This will error if imported in client component export async function getSecretData() { return db.secrets.findMany(); }