with one click
nextjs-mastery
Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching
Menu
Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching
| name | nextjs-mastery |
| description | Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching |
app/
layout.tsx # Root layout (wraps all pages)
page.tsx # Home route /
loading.tsx # Route-level Suspense fallback
error.tsx # Route-level error boundary
not-found.tsx # Custom 404
(marketing)/
about/page.tsx # /about (grouped without URL segment)
dashboard/
layout.tsx # Nested layout for /dashboard/*
page.tsx # /dashboard
@analytics/page.tsx # Parallel route slot
@activity/page.tsx # Parallel route slot
settings/
page.tsx # /dashboard/settings
api/
webhooks/route.ts # Route handler (POST /api/webhooks)
Route groups (name) organize code without affecting URLs. Parallel routes @slot render multiple pages simultaneously.
async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const product = await db.product.findUnique({ where: { id } });
if (!product) notFound();
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
<Suspense fallback={<ReviewsSkeleton />}>
<Reviews productId={id} />
</Suspense>
</div>
);
}
async function Reviews({ productId }: { productId: string }) {
const reviews = await db.review.findMany({ where: { productId } });
return (
<ul>
{reviews.map(r => <li key={r.id}>{r.text} - {r.rating}/5</li>)}
</ul>
);
}
Server Components are the default. They run on the server, can access databases directly, and send zero JavaScript to the client.
export const revalidate = 3600;
async function BlogPage() {
const posts = await fetch("https://api.example.com/posts", {
next: { revalidate: 3600, tags: ["posts"] },
}).then(r => r.json());
return <PostList posts={posts} />;
}
import { revalidateTag, revalidatePath } from "next/cache";
export async function createPost(formData: FormData) {
"use server";
await db.post.create({ data: { title: formData.get("title") as string } });
revalidateTag("posts");
revalidatePath("/blog");
}
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const token = request.cookies.get("session")?.value;
if (request.nextUrl.pathname.startsWith("/dashboard") && !token) {
return NextResponse.redirect(new URL("/login", request.url));
}
const response = NextResponse.next();
response.headers.set("x-request-id", crypto.randomUUID());
return response;
}
export const config = {
matcher: ["/dashboard/:path*", "/api/:path*"],
};
Middleware runs at the edge before every matched request. Keep it lightweight.
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";
const schema = z.object({
email: z.string().email(),
name: z.string().min(2).max(100),
});
export async function updateProfile(prevState: any, formData: FormData) {
const parsed = schema.safeParse(Object.fromEntries(formData));
if (!parsed.success) {
return { errors: parsed.error.flatten().fieldErrors };
}
await db.user.update({
where: { email: parsed.data.email },
data: { name: parsed.data.name },
});
revalidatePath("/profile");
return { success: true };
}
'use client' to top-level layout or page componentsuseEffect for data fetching instead of Server Components or use()<Suspense>loading.tsx and error.tsx conventions'use client' only on interactive leaves<Suspense> boundaries wrap independent async sectionsloading.tsx and error.tsx exist for key routesrevalidateTag or revalidatePath called after mutationsRoute broad or ambiguous AgentKit SEO work to the right module while keeping context scoped. Use when a request spans multiple surfaces, asks for overall digital-presence strategy, involves provider or install architecture, needs agent-context planning, or the correct platform skill is unclear.
Persistent memory system for Claude Code. Two-layer architecture (hot cache + knowledge wiki), safety hooks, /close-day end-of-day synthesis. Zero external dependencies.
Claude-native deep research using DAG-based query planning, parallel subagent execution, and gap-driven iteration. No external API needed.
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
Authentication and authorization patterns including OAuth2, JWT, RBAC, session management, and PKCE flows
AWS cloud patterns for Lambda, ECS, S3, DynamoDB, and Infrastructure as Code with CDK/Terraform