{children}<\/main>

{analytics}<\/aside>

{team}<\/aside> <\/div> ) } \/\/ app\/dashboard\/@analytics\/page.tsx export default async function AnalyticsSlot() { const stats = await getAnalytics() return } \/\/ app\/dashboard\/@analytics\/loading.tsx export default function AnalyticsLoading() { return } \/\/ app\/dashboard\/@team\/page.tsx export default async function TeamSlot() { const members = await getTeamMembers() return } ``` ### Pattern 5: Intercepting Routes (Modal Pattern) ```typescript \/\/ File structure for photo modal \/\/ app\/ \/\/ ├── @modal\/ \/\/ │ ├── (.)photos\/[id]\/page.tsx # Intercept \/\/ │ └── default.tsx \/\/ ├── photos\/ \/\/ │ └── [id]\/page.tsx # Full page \/\/ └── layout.tsx \/\/ app\/@modal\/(.)photos\/[id]\/page.tsx import { Modal } from '@\/components\/Modal' import { PhotoDetail } from '@\/components\/PhotoDetail' export default async function PhotoModal({ params, }: { params: Promise<{ id: string }> }) { const { id } = await params const photo = await getPhoto(id) return ( <\/Modal> ) } \/\/ app\/photos\/[id]\/page.tsx - Full page version export default async function PhotoPage({ params, }: { params: Promise<{ id: string }> }) { const { id } = await params const photo = await getPhoto(id) return (

<\/div> ) } \/\/ app\/layout.tsx export default function RootLayout({ children, modal, }: { children: React.ReactNode modal: React.ReactNode }) { return ( {children} {modal} <\/body> <\/html> ) } ``` ### Pattern 6: Streaming with Suspense ```typescript \/\/ app\/product\/[id]\/page.tsx import { Suspense } from 'react' export default async function ProductPage({ params, }: { params: Promise<{ id: string }> }) { const { id } = await params \/\/ This data loads first (blocking) const product = await getProduct(id) return (

{\/* Immediate render *\/} {\/* Stream in reviews *\/} }> <\/Suspense> {\/* Stream in recommendations *\/} }> <\/Suspense> <\/div> ) } \/\/ These components fetch their own data async function Reviews({ productId }: { productId: string }) { const reviews = await getReviews(productId) \/\/ Slow API return } async function Recommendations({ productId }: { productId: string }) { const products = await getRecommendations(productId) \/\/ ML-based, slow return } ``` ### Pattern 7: Route Handlers (API Routes) ```typescript \/\/ app\/api\/products\/route.ts import { NextRequest, NextResponse } from 'next\/server' export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams const category = searchParams.get('category') const products = await db.product.findMany({ where: category ? { category } : undefined, take: 20, }) return NextResponse.json(products) } export async function POST(request: NextRequest) { const body = await request.json() const product = await db.product.create({ data: body, }) return NextResponse.json(product, { status: 201 }) } \/\/ app\/api\/products\/[id]\/route.ts export async function GET( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { const { id } = await params const product = await db.product.findUnique({ where: { id } }) if (!product) { return NextResponse.json( { error: 'Product not found' }, { status: 404 } ) } return NextResponse.json(product) } ``` ### Pattern 8: Metadata and SEO ```typescript \/\/ app\/products\/[slug]\/page.tsx import { Metadata } from 'next' import { notFound } from 'next\/navigation' type Props = { params: Promise<{ slug: string }> } export async function generateMetadata({ params }: Props): Promise { const { slug } = await params const product = await getProduct(slug) if (!product) return {} return { title: product.name, description: product.description, openGraph: { title: product.name, description: product.description, images: [{ url: product.image, width: 1200, height: 630 }], }, twitter: { card: 'summary_large_image', title: product.name, description: product.description, images: [product.image], }, } } export async function generateStaticParams() { const products = await db.product.findMany({ select: { slug: true } }) return products.map((p) => ({ slug: p.slug })) } export default async function ProductPage({ params }: Props) { const { slug } = await params const product = await getProduct(slug) if (!product) notFound() return } ``` ## Caching Strategies ### Data Cache ```typescript \/\/ No cache (always fresh) fetch(url, { cache: 'no-store' }) \/\/ Cache forever (static) fetch(url, { cache: 'force-cache' }) \/\/ ISR - revalidate after 60 seconds fetch(url, { next: { revalidate: 60 } }) \/\/ Tag-based invalidation fetch(url, { next: { tags: ['products'] } }) \/\/ Invalidate via Server Action 'use server' import { revalidateTag, revalidatePath } from 'next\/cache' export async function updateProduct(id: string, data: ProductData) { await db.product.update({ where: { id }, data }) revalidateTag('products') revalidatePath('\/products') } ``` ## Best Practices ### Do's - **Start with Server Components** - Add 'use client' only when needed - **Colocate data fetching** - Fetch data where it's used - **Use Suspense boundaries** - Enable streaming for slow data - **Leverage parallel routes** - Independent loading states - **Use Server Actions** - For mutations with progressive enhancement ### Don'ts - **Don't pass serializable data** - Server → Client boundary limitations - **Don't use hooks in Server Components** - No useState, useEffect - **Don't fetch in Client Components** - Use Server Components or React Query - **Don't over-nest layouts** - Each layout adds to the component tree - **Don't ignore loading states** - Always provide loading.tsx or Suspense ## Resources - [Next.js App Router Documentation](https:\/\/nextjs.org\/docs\/app) - [Server Components RFC](https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0188-server-components.md) - [Vercel Templates](https:\/\/vercel.com\/templates\/next.js)

nextjs-app-router-patterns