app-router-helper

App Router Helper

Implement Next.js App Router patterns for modern React applications.

Quick Start

App Router (Next.js 13+) uses file-system routing in the app/ directory with Server Components by default.

Key concepts:

• Server Components (default): Render on server, reduce bundle size
• Client Components ('use client'): Interactive, use hooks
• Layouts: Shared UI across routes
• Loading/Error: Automatic UI states

Instructions

Step 1: Understand File Structure

Basic structure:

app/
├── layout.tsx          # Root layout (required)
├── page.tsx            # Home page (/)
├── loading.tsx         # Loading UI
├── error.tsx           # Error UI
├── not-found.tsx       # 404 page
└── about/
    └── page.tsx        # About page (/about)

Special files:

• layout.tsx: Shared UI, doesn't re-render
• page.tsx: Unique UI for route
• loading.tsx: Loading state (Suspense boundary)
• error.tsx: Error boundary
• template.tsx: Re-renders on navigation
• route.ts: API endpoint

Step 2: Create Layouts

Root layout (required):

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Nested layouts:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Layouts persist across navigation and don't re-render.

Step 3: Server vs Client Components

Server Component (default):

// app/products/page.tsx
// No 'use client' = Server Component

async function ProductsPage() {
  // Can fetch data directly
  const products = await db.products.findMany();
  
  return (
    <div>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

export default ProductsPage;